Recentemente, transformei o projeto da minha empresa em Durandal usando o Knockout e o JQuery. Direto para o problema: eu preciso inicializar o datepicker do JQuery UI usando duas entradas HTML. JQuery, no entanto, não consegue localizar as entradas quando eu faço isso:

Visão:

<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 - A função SelectUser () é chamada quando um usuário é selecionado na primeira div, depois a segunda div e também os usuários / _UserDetail.html são carregados:

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

A parte importante de _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>

Então as duas entradas HTML vêm como indefinidas. Se eu mudar odiv com ocompose vinculando ao usuário real / _UserDetail.html conteúdo, ele funciona muito bem, mas a exibição rapidamente se torna uma bagunça - o arquivo html não é exatamente pequeno. Se alguém pudesse me apontar na direção certa, eu ficaria grato. Obrigado!