4

KnockoutのEditable Grid Exampleを使用し、 Steve Sanderson ブログに結び付けて、編集可能なグリッド内で DatePicker または datetimepicker を機能させようとしています。Ryan Niemeyerによってセットアップされた datepicker バインディングを使用することから始めましたが、これは監視可能な配列では機能しません。

したがって、コードは次のようになります。

ko.bindingHandlers.datetimepicker = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datetimepickerOptions || {};
        $(element).datetimepicker(options);

        //handle the field changing
        ko.utils.registerEventHandler(element, "change", function() {
            var observable = valueAccessor();
            console.log("changing", observable);
            observable($(element).datetimepicker("getDate"));
        });

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $(element).datetimepicker("destroy");
        });

    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            current = $(element).datetimepicker("getDate");
        console.log("updating");
        if (value - current !== 0) {
            console.log("setting", value);
            $(element).datetimepicker("setDate", value); 
            console.log("just set", $(element).datetimepicker("getDate"));            
        }
    }
};

バインディングで：

<td><input class ="datetimeClass" style="width:130px" data-bind="datetimepicker: CPDateString, uniqueName: true" /></td>

どんな助けや例も大歓迎です。これは、observerablearray の各項目自体が監視可能ではないことに関係していることはわかっていますが、Javascript が初めてなので、修正方法がわかりません。

Change イベントで「文字列は関数ではありません」というエラーが表示されます。次のように、フィールドを監視可能にするコードを追加すると、次のようになります。

 $(initialData).each(function(gift) { 
    this.CPDateString = ko.observable(this.CPDateString); 
});

その後、datetimepicker が機能し、ブラウザーが正しく更新されますが、データは投稿されないため、次の方法で投稿される実際のギフト配列は更新されません。

var initialDataLocations = @Html.Raw(JsonConvert.SerializeObject(ViewBag.Locations));

var initialData = @Html.Raw(JsonConvert.SerializeObject(Model));

var viewModel = {
    availableLocations: ko.observableArray(initialDataLocations),
    gifts: ko.observableArray(initialData),
    save: function() {      
        ko.utils.postJson(location.href, { gifts: this.gifts })
        }
    };

前もって感謝します。

4

1 に答える 1

3

カスタム バインディングは、ウィジェット UI コントロールを使用するための強力なツールです。datetimepicker カスタムバインディングを使用して、テキストボックス/入力を日時ピッカーにし、入力の値に標準の ko バインディングを使用するだけです。

<td><input class ="datetimeClass" style="width:130px" data-bind="datetimepicker: {}, value:CPDateString, uniqueName: true" /></td>

これが役立つことを願っています

例で更新：

次のように、非常に単純な日付ピッカー カスタム バインディングを作成しました。

ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor) {
        var options = valueAccessor();
        $(element).datepicker(options || {});
    }
};

また、html コードでは、次のようにカスタム バインディングを使用するだけです。

<input id="txtFromtDate" data-bind="datepicker:{}, value:lastUpdateFrom" type="text" />
于 2013-02-21T17:15:23.473 に答える