Niedawno przeniosłem projekt mojej firmy do Durandal za pomocą Knockout i JQuery. Prosto do problemu: muszę zainicjować datepicker JIQuery UI przy użyciu dwóch wejść HTML. JQuery nie jest jednak w stanie zlokalizować danych wejściowych, gdy to robię:

widok:

<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 - Funkcja SelectUser () jest wywoływana, gdy użytkownik jest wybrany w pierwszym div, a następnie ładowany jest drugi div, a także użytkownicy / _UserDetail.html:

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"
        });
    });
}

Ważna część _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>

Następnie dwa wejścia HTML są niezdefiniowane. Jeśli zmieniędiv zcompose powiązanie z rzeczywistą zawartością użytkowników / _UserDetail.html, działa dobrze, ale wtedy widok szybko staje się bałaganem - plik html nie jest dokładnie mały. Gdyby ktoś wskazał mi właściwy kierunek, byłbym wdzięczny. Dzięki!