1

最近、Knockout と JQuery を使用して会社のプロジェクトを Durandal に移植しました。問題にまっすぐ: 2 つの HTML 入力を使用して JQuery UI の日付ピッカーを初期化する必要があります。ただし、これを行うと、JQueryは入力を見つけることができません。

見る：

<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 - 最初の div でユーザーが選択されたときに SelectUser() 関数が呼び出され、次に 2 番目の div と 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"
        });
    });
}

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

次に、2 つの HTML 入力が未定義になります。実際の users/_UserDetail.html コンテンツへのバインディングを変更するdivと、compose問題なく動作しますが、ビューがすぐに混乱します。html ファイルは正確に小さくはありません。誰かが私を正しい方向に向けることができれば、私は感謝します. ありがとう！

4

2 に答える 2

4

このシナリオでは、ノックアウト バインディング ハンドラーが必要です。

一部のシナリオでは、バインディング ハンドラーがコンポジションのライフサイクルに問題を起こす可能性があります。その場合、Durandal 2 を使用している場合は、メソッドを使用できますcomposition.addBindingHandler。それ以外の場合は、 を使用してko.bindingHandlersください。

すべてのアプリケーションで使用できるように、 でバインディングを作成する必要がありshell.jsます。main.js次のコードを使用します。

 var composition = require('durandal/composition');
 composition.addBindingHandler('datetimepicker', {
            init: function (element, valueAccessor) {
                var activeTo =  valueAccessor();  //What do you want to do with this value?
                $(element).datetimepicker({
                   dateFormat: "d. m. yy",
                   timeFormat: "HH:mm:ss",
                   defaultDate: null   //Maybe use activeTo here?
                  });
            }
         });

そしてあなたのUIで：

 <input type="text" data-bind="datetimepicker: ActiveTo" id="datepickerTo" />

ノート：

このコードは機能しない可能性がありますが、この種のコントロールを作成し、Durandal のコンポジション ライフサイクルを使用するには、このアプローチを確実に使用する必要があります。

于 2013-09-09T15:51:41.363 に答える
1

問題はこれにあると確信しています：

users.SelectUser = function (user) {
    servers.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"
        });
    });
}

関数内にjQuery datepicker initコードがあります。つまり、SelectUser関数が呼び出されたときにのみ実行されます。それを関数の外に移動してみてください。

于 2013-09-09T15:16:49.893 に答える