Integrare il koGrid con il modello Durandal/HotTowel

Question

Io lavoro su una soluzione asp.net con il modello Durandal.

Provo ad usare il koGrid (https://github.com/Knockout-Contrib/KoGrid) che è compatibile con l'eliminazione diretta. Quando si inserisce questa griglia in una pagina di prova gestita da Durandal, non funziona: la griglia sembra essere lì ma non visualizzata correttamente.

Abbiamo notato che se ridimensioniamo la finestra, la griglia si regola correttamente.

Qualcuno riesce già a integrare questo koGrid in un modello Durandal/HotTowel?

Passaggi per riprodurre il problema:

• Creare un nuovo progetto ASP.NET MVC e scegliere il modello Durandal
• Aggiungere il koGrid nel progetto (disponibile in Nuget)
• Luogo questa griglia su una visione e aggiungere dati fittizi
• Run e visualizzare la vista contenente la griglia

Ecco un file zip contenente un piccolo progetto ASP.NET MVC per riprodurre il problema: https://www.dropbox.com/s/15rphyhkqp1h8py/KOGrid-HotTowelTemplate.zip

Grazie per il vostro aiuto.

Answer 1

Questo dovrebbe essere considerato solo una soluzione! Si applica a Durandal.Core 1.2 con koGrid-2.1.1.js. Se si apportano modifiche per correggere questo comportamento, aggiornerò il post.

Aggiungere una funzione viewAttached() nel ViewModel (ed essere sicuri di aggiungerlo al tuo oggetto letterale) in questo modo:

function viewAttached() { 
    logger.log('Home View Attached', null, 'home', true); 
    $(window).trigger('resize'); 
    return true; 
} 

La funzione viewAttached si verifica dopo vincolante la composizione, e il grilletto farà sì che il koGrid per aggiornare le osservabili larghezza/altezza. koGrid ascolta questo evento.

NOTA: sussistono ancora conflitti CSS con il modello HotTowel che è necessario risolvere. La SPA utilizza una dimensione del carattere di 18px sul tag del corpo. Anche le caselle di controllo del pannello dovrebbero essere nascoste, un possibile conflitto con i CSS di Bootstrap.

Answer 2

La soluzione precedente garantisce la visualizzazione della griglia, tuttavia l'ordinamento non funziona per me almeno. Come mikekidder ha commentato sopra il nocciolo del problema è che "quando KOGrid fa il suo binding in Durandal/HotTowel, l'elemento KOGrid non fa ancora parte del DOM". È necessario assicurarsi che KOGrid non esegua il binding fino a quando non viene allegata la vista.Ciò può essere ottenuto come segue:

1) Aggiungere un nuovo osservabile al ViewModel per contenere un valore booleano riguarda se la vista è stato collegato o meno da Durandal:

isAttachedToView = ko.observable(false) 

ed esporlo

isAttachedToView: isAttachedToView 

2) Fino data che sia vero quando la funzione di callback viewAttached viene richiamata:

function viewAttached() { 
    isAttachedToView(true); 
    logger.log('viewAttached'); 
    $(window).trigger('resize'); 
    return true; 
} 

3) Circondare il codice HTML con un'istruzione ko if per garantire che il bit di HTML non sia valutato (ad es. kogrid non fa suo legame) fino a dopo la visualizzazione è attaccato:

<!-- ko if: isAttachedToView() --> 
    <div data-bind="koGrid: { data: ... 

<!-- /ko --> 

4) Aggiorna isAttachedToView essere falso sulla disattivazione vista

function deactivate() { 
    isAttachedToView(false); 
} 

E esporre questo:

deactivate: deactivate 

Answer 3

Questo aggiornamento si applica a Durandal 2.x

A partire da Durandal 2.0, esiste un modo per specificare i binding che devono essere posticipati fino al completamento della composizione.

Per kogrid funzioni correttamente, tutto ciò che è necessario è di eseguire questa riga di codice come parte dell'inizializzazione quadro Durandal:

composition.addBindingHandler('koGrid'); 

Il composition variabile in questo esempio è un riferimento al modulo composizione Durandal.

vedere la documentazione per ulteriori informazioni: http://durandaljs.com/documentation/Interacting-with-the-DOM.html