2

このjqueryカラーピッカーをknockout.jsで使用しようとしています。colorpicker入力コントロールをviewModelカラー値にバインドするカスタムバンディングハンドラーを作成しました。

バインディングハンドラーのコードは次のとおりです。

ko.bindingHandlers.colorPicker = {
init: function (element, valueAccessor, allBindingsAccessor) {

    //initialize datepicker with some optional options
    var options = allBindingsAccessor().colorPickerOptions || {};
    $(element).colorPicker(options);

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

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

},
update: function (element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());       
    $(element).colorPicker("value", value);        
}

およびHTML：

 <input type="text" data-bind="colorPicker: newEvent().color, colorPickerOptions: { value:newEvent().color }"/>

問題は、色を変更すると、画像に示すように色を変更するたびに複数のdivが作成されることです。

ここに画像の説明を入力してください

誰かが私のコードの問題を特定できますか？

4

2 に答える 2

4

これは、jQuery ColorPickerバインディングハンドラーの更新されたコードです（knockout.js librarayで使用されます）。

ko.bindingHandlers.jqColorPicker = {
  init: function (element, valueAccessor, allBindingsAccessor) {

    // set default value
    var value = ko.utils.unwrapObservable(valueAccessor());
    $(element).val(value);

    //initialize datepicker with some optional options
    var options = allBindingsAccessor().colorPickerOptions || {};
    $(element).colorPicker(options);

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

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

  },
  update: function (element, valueAccessor, allBindingsAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    $(element).val(value);        
    $(element).change();        
  }
};
于 2012-12-17T07:43:03.337 に答える
0

更新コードでは、新しいカラーピッカーを効果的に作成しています。

色が変わると、更新関数が呼び出され、そこで新しいピッカーが作成されます。' $（element）.colorPicker（ "value"、value）;を試してみてください 'firebugでは、それがセッターではなくコンストラクターであることがわかります。

于 2012-10-12T14:26:50.617 に答える