Ich habe kürzlich mein Unternehmensprojekt mit Knockout und JQuery nach Durandal portiert. Direkt zum Problem: Ich muss den Datepicker von JQuery UI mit zwei HTML-Eingaben initialisieren. JQuery kann die Eingaben jedoch nicht finden, wenn ich dies tue:

Aussicht:

<div data-bind="if: !CurrentUser()">
    <h1 data-bind="html: DisplayName"></h1>

    <div data-bind="compose: 'users/_UsersList.html'"></div>
</div>

<div data-bind="with: CurrentUser(), visible: CurrentUser()">
    <h1>User detail</h1>

    <div data-bind="compose: 'users/_UserDetail.html'"></div>
</div>

viewmodel - Die Funktion SelectUser () wird aufgerufen, wenn ein Benutzer in der ersten Abteilung ausgewählt wird, dann wird die zweite Abteilung und auch users / _UserDetail.html geladen:

users.SelectUser = function (user) {
    users.CurrentUser(user);

    /* ... */

    $(function () {
        $("#datepickerFrom").datetimepicker({
            dateFormat: "d. m. yy",
            timeFormat: "HH:mm:ss",
            defaultDate: null
        });

        $("#datepickerTo").datetimepicker({
            dateFormat: "d. m. yy",
            timeFormat: "HH:mm:ss"
        });
    });
}

Der wichtige Teil von _UserDetail.html

<div class="control-group">
    <label class="control-label">Active from</label>
    <div class="controls">
        <input type="text" data-bind="value: ActiveFrom" id="datepickerFrom" />
    </div>
</div>
<div class="control-group">
    <label class="control-label">Active to</label>
    <div class="controls">
        <input type="text" data-bind="value: ActiveTo" id="datepickerTo" />
    </div>
</div>

Dann sind die beiden HTML-Eingaben undefiniert. Wenn ich das änderediv mit demcompose Das Binden an den eigentlichen Inhalt von users / _UserDetail.html funktioniert einwandfrei, aber dann wird die Ansicht schnell zu einem Chaos - die HTML-Datei ist nicht gerade klein. Wenn mich jemand in die richtige Richtung weisen könnte, wäre ich dankbar. Vielen Dank!