Recientemente porté el proyecto de mi compañía a Durandal usando Knockout y JQuery. Directo al problema: necesito inicializar el selector de fechas de JQuery UI con dos entradas HTML. JQuery, sin embargo, no puede localizar las entradas cuando hago esto:

ver:

<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 - Se llama a la función SelectUser () cuando se selecciona un usuario en el primer div, luego se carga el segundo div y también users / _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"
        });
    });
}

La 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>

Entonces las dos entradas HTML vienen como indefinidas. Si cambio eldiv con elcompose vinculando al contenido de los usuarios / _UserDetail.html reales, funciona bien, pero luego la vista se convierte en un desastre - el archivo html no es exactamente pequeño. Si alguien me pudiera indicar la dirección correcta, estaría agradecido. ¡Gracias!