Integrieren Sie das KoGrid mit der Durandal/HotTowel Vorlage

Question

Ich arbeite an einer asp.net-Lösung mit dem Durandal-Template.

Ich versuche, das KoGrid (https://github.com/Knockout-Contrib/KoGrid) zu verwenden, das mit Knockout kompatibel ist. Wenn Sie dieses Raster in eine von Durandal verwaltete Testseite einfügen, funktioniert es nicht: Das Raster scheint dort zu sein, wird aber nicht korrekt angezeigt.

Wir haben festgestellt, dass wenn wir die Größe des Fensters ändern, dann das Gitter korrekt anpassen.

Ist es bereits gelungen, dieses koGrid in ein Durandal/HotTowel Template zu integrieren?

Schritte, das Problem zu reproduzieren:

• ein neues ASP.NET MVC-Projekt erstellen und Durandal Vorlage
• Fügen Sie die koGrid im Projekt (in Nuget)
• Dieses Gitter wählen auf einen Blick und die Dummy-Daten
• Run hinzufügen und die Ansicht die grid

enthält anzuzeigen Hier ist eine ZIP, die ein kleines ASP.NET MVC-Projekt enthält, um das Problem zu reproduzieren: https://www.dropbox.com/s/15rphyhkqp1h8py/KOGrid-HotTowelTemplate.zip

Vielen Dank für Ihre Hilfe.

Answer 1

Dies sollte nur als Problemumgehung betrachtet werden! Gilt für Durandal.Core 1,2 mit koGrid-2.1.1.js. Wenn sich dieses Verhalten ändert, werde ich den Beitrag aktualisieren.

hinzufügen viewAttached() Funktion in Ihrem Viewmodel (und sicher sein, es zu Ihrem Objektliteral hinzufügen) wie folgt:

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

Die viewAttached Funktion tritt auf, nachdem die Zusammensetzung zu binden, und der Auslöser bewirkt, dass die koGrid, um seine Breiten-/Höhen-Observablen zu aktualisieren. koGrid hört auf dieses Ereignis.

HINWEIS: Es gibt immer noch CSS-Konflikte mit der HotTowel-Vorlage, die Sie beheben müssen. Das SPA verwendet eine Schriftgröße von 18 Pixel auf dem Body-Tag. Auch die Panel-Checkboxen sollten ausgeblendet sein, ein möglicher Konflikt mit dem Bootstrap-CSS.

Answer 2

Die vorherige Lösung wird sicherstellen, dass das Raster angezeigt wird, jedoch funktioniert die Sortierung für mich zumindest nicht. Wie mikekidder oben bemerkt hat, besteht der Kern des Problems darin, dass "wenn KOGrid in Durandal/HotTowel bindet, das KOGrid-Element noch nicht Teil des DOM ist". Sie müssen sicherstellen, dass KOGrid erst nach dem Hinzufügen der Ansicht bindet.Dies kann wie folgt erreicht werden:

1) mit dem Viewmodel ein neues beobachtbaren hinzufügen für einen Booleschen Wert zu halten, ob die Ansicht angebracht wurde oder nicht durch durandal:

isAttachedToView = ko.observable(false) 

und setzen Sie es

isAttachedToView: isAttachedToView 

2) das Datum es um wahr zu sein, wenn die viewAttached Callback-Funktion aufgerufen wird:

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

3) Umgeben Sie Ihren HTML-Code mit einer ko if-Anweisung, um sicherzustellen, dass ein bisschen HTML nicht ausgewertet wird (d. H. kogrid macht nicht seine Bindung) erst nach der Ansicht angebracht ist:

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

<!-- /ko --> 

4) isAttachedToView Zurücksetzen falsch sein auf

function deactivate() { 
    isAttachedToView(false); 
} 

Ansicht deaktivieren und setzen diese:

deactivate: deactivate 

Answer 3

Diese Aktualisierung bezieht sich auf Durandal 2.x

Beginnend mit Durandal 2.0 gibt es eine Möglichkeit, Bindungen anzugeben, die zurückgestellt werden sollten, bis die Komposition abgeschlossen ist.

Für kogrid korrekt zu arbeiten, alles, was erforderlich ist, ist diese Codezeile als Teil der Durandal Rahmen Initialisierung auszuführen:

composition.addBindingHandler('koGrid'); 

Die composition Variable in diesem Beispiel ein Verweis auf das Modul Durandal Zusammensetzung ist.

finden Sie in der Dokumentation für weitere Informationen: http://durandaljs.com/documentation/Interacting-with-the-DOM.html