1

ウィザードにノックアウトが正常に機能する4つのステップが含まれていますが、ステップ2でJqueryの日付ピッカーを追加すると、ブラウザーを更新すると日付ピッカーが表示されません（入力タイプのテキスト表示のみ）が、ステップの情報が失われます1（ブラウザを更新した場合）、どうすれば問題を解決できますか？

私のウィザードは次のようになります：http：//jsfiddle.net/FyuSD/36/

Wizard.cshtml：

....
<script id="step1" type="text/html">    
 <div>Name: <input type="text" data-bind="value: Name"></div>
 <div>Description: <input type="text" data-bind="value: Description"></div>
</script>

<script id="step2" type="text/html">
  Start: <br/><input type="text" id="from"  data-bind="value: StartDate">
  Stop:<br/> <input type="text" id="to" class="required" data-bind="value: EndDate">
</script>
.....

DatePicker.js：

 $(function () {
  $("#from").datepicker({
    showOn: "button",
    buttonImage: "/Content/images/calendar.gif",
    buttonImageOnly: true,
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1,
    onSelect: function (selectedDate) {
        $("#to").datepicker("option", "minDate", selectedDate);
    }
});
$("#to").datepicker({
    showOn: "button",
    buttonImage: "/Content/images/calendar.gif",
    buttonImageOnly: true,
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1,
    onSelect: function (selectedDate) {
        $("#from").datepicker("option", "maxDate", selectedDate);
    }
});
});

英語が下手でごめんなさい

ありがとう、

4

1 に答える 1

0

私はフィドルで少し遊んだ、そしてあなたの解決策はこの質問への答えである

KnockoutJSによってキャッチされないjQueryUIdatepicker変更イベント

これは、ノックアウトのドキュメントで説明されているカスタムバインディングの日付ピッカーの実装を示しています。ノックアウト-カスタムバインディング

テンプレートのレンダリング時に日付ピッカーを初期化するカスタムバインディングハンドラーを作成する必要があります。

    // call this before you call ko.applyBindings()
    ko.bindingHandlers.datepicker = {
         init: function(element, valueAccessor, allBindingsAccessor) {
             // initialize here
         },
         update: function(element, valueAccessor, allBindingsAccessor) {
             // change handler here
         }
    };

データバインディングを宣言するときは、（「value：StartDate」の代わりに）カスタムバインディングの名前を使用します

    <br/>
    Start :<input type="text" id="from" data-bind="datepicker: StartDate, datepickerOptions: {onSelect: $root.onSelectStartDate()}" /> 
    <br/>
    End :<input type="text" id="to" data-bind="datepicker: EndDate, datepickerOptions: {onSelect: $root.onSelectEndDate()}" />

もちろん$root、ViewModelクラスを参照しているので、そこにいくつかのメソッドが必要です。これは、minDateコードとmaxDateコードを配置できる場所です。

    function ViewModel() {

        // ...

        self.onSelectStartDate = function() {
            return function() {
                alert("Start Date selected");
            };
        };

        self.onSelectEndDate = function() {
            return function() {
                alert("End Date selected");
            };
        };
    };

ここhttp://jsfiddle.net/carbontax/bwA4N/5/で更新されたフィドルでテストしました。datepicker cssが利用できないため、面白そうに見えますが、バインディングハンドラーは正しいことを行っています。

于 2012-08-04T16:43:29.263 に答える