.datepicker Aufruf innerhalb von Durandal aktivieren Funktion funktioniert nicht

Question

Ich komponiere dies in einer Ansicht, dann versuchen, .datepicker() auf das Ergebnis, aber nichts passiert.

Der compose Behälter

<div> 
<!--ko compose: { model:'viewmodels/schedule', view: 'views/schedule.html', activate:true} --> 
<!--/ko--> 
</div> 

schedule.html

<div class="schedule-editor"> 

</div> 

Und der Zeitplan Modul

define([], function() { 
    var vm = { 
     activate: activate, 
    }; 
    return vm; 

    function activate() { 
     $('.schedule-editor').datepicker(); 
     console.log("activated schedule module"); 
     return true; 
    } 
}); 

Conso le protokolliert "aktiviertes Zeitplanmodul", aber der Datapicker wird nicht erstellt. Wenn ich auf die Chrom-Konsole gehe und den jQuery-Anruf starte, $('.schedule-editor').datepicker();, bringt es den Datepicker in Ordnung.

Die Durandal-Dokumentation behauptet, dass die Aktivierungsfunktion aufgerufen wird, nachdem das DOM vollständig zusammengesetzt ist, also weiß ich nicht, was ich sonst noch versuchen soll.

Answer 1

Wie Nemesv erwähnt, sollten Sie stattdessen viewAttached verwenden.

define([], function() { 
    var vm = { 
     viewAttached: viewAttached, 
    }; 
    return vm; 

    function viewAttached(view) { 
     $(view).find('.schedule-editor').datepicker(); 
     console.log("activated schedule module"); 
     return true; 
    } 
}); 

Aktivieren geschieht im Lebenszyklus, bevor Ihr Modell hat dagetenbundenen auf die neue Ansicht und vor dem Blick auf den Dom hinzugefügt wurde. viewAttached geschieht, nachdem die Ansicht datengebunden an Ihr Modell gebunden und an das Dom angehängt wurde.

EDIT

Durandal 2.0 viewAttached-attached

Answer 2

Es gibt einen anderen Ansatz dazu umbenannt hat, die auf die deklarative UI-Philosophie treu bleibt, die knockout.js und durandal erstrebenswert sind.

Es ermöglichen Ihnen, die picker im HTML wie folgt zu erklären:

<div class="schedule-editor" data-bind=" 
    jqueryui: { 
     widget: 'datepicker', 
     options: { 
      // you can set options here as per the jquery ui datepicker docs 
     } 
    }"> 

</div> 

einfach die jQuery UI-Widget-Bindungen in diesem Kern gefunden sind: https://github.com/SteveSanderson/knockout/wiki/Bindings---jqueryui-widgets

Stellen Sie sicher, dass die oben Javascript sind nach du hast jquery, jquery ui und knockout geladen.