如何将jQuery UI选项绑定到敲除可观察对象

这个fiddle显示了如何将jQuery滑块“slide”事件绑定到Knockout可观察对象。这需要如何改变，以将滑块的'max'选项绑定到可观察对象？你是否必须创建一个全新的ko.bindingsHandler条目？还是可以使用现有的？如何将jQuery UI选项绑定到敲除可观察对象

以下是小提琴的代码供参考。

HTML

<h2>Slider Demo</h2> 

Savings: <input data-bind="value: savings, valueUpdate: 'afterkeydown'" /> 
<div style="margin: 10px" data-bind="slider: savings, sliderOptions: {min: 0, max: 100, range: 'min', step: 1}"></div> 

Spent: <input data-bind="value: spent, valueUpdate: 'afterkeydown'" /> 
<div style="margin: 10px" data-bind="slider: spent, sliderOptions: {min: 0, max: 100, range: 'min', step: 1}"></div> 

Net: <span data-bind="text: net"></span>

ko.bindingHandlers.slider = { 
    init: function (element, valueAccessor, allBindingsAccessor) { 
    var options = allBindingsAccessor().sliderOptions || {}; 
    $(element).slider(options); 
    ko.utils.registerEventHandler(element, "slidechange", function (event, ui) { 
     var observable = valueAccessor(); 
     observable(ui.value); 
    }); 
    ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
     $(element).slider("destroy"); 
    }); 
    ko.utils.registerEventHandler(element, "slide", function (event, ui) { 
     var observable = valueAccessor(); 
     observable(ui.value); 
    }); 
    }, 
    update: function (element, valueAccessor) { 
    var value = ko.utils.unwrapObservable(valueAccessor()); 
    if (isNaN(value)) value = 0; 
    $(element).slider("value", value); 

    } 
}; 


var ViewModel = function() { 
    var self = this; 

    self.savings = ko.observable(10); 
    self.spent = ko.observable(5); 
    self.net = ko.computed(function() { 
     return self.savings() - self.spent(); 
    }); 
} 

ko.applyBindings(new ViewModel());

来源

2013-02-11 John Livermore

我有jQuery UI的绑定KO的集合。我没有完成滑块，因为我没有需要在一个项目中的控制。但检查我的按钮结合

https://github.com/AndersMalmgren/Knockout.Bindings

ko.bindingHandlers.button = { 
    initIcon: function (options) { 
     if (options.icon) { 
      options.icons = { primary: options.icon }; 
     } 
    }, 
    init: function (element, valueAccessor) { 
     var options = ko.utils.unwrapObservable(ko.toJS(valueAccessor())) || {}; 
     ko.bindingHandlers.button.initIcon(options); 

     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
      $(element).button("destroy"); 
     }); 

     $(element).button(options); 
    }, 
    update: function (element, valueAccessor) { 
     var options = ko.toJS(valueAccessor()); 
     ko.bindingHandlers.button.initIcon(options); 

     if (options) { 
      $(element).button(options); 
     } 
    } 
};

神奇的是在更新功能完成后，KO将默认订阅所有观测在字面一个对象，因此，如果您绑定到{ max: aObservable }更新功能将触发当任何孩子更新时。

然后我做ko.toJS(valueAccessor()); un观察对象并使用它来更新jQuery控件。这种方法也可以用于滑块，它的通用性，您不需要为每个设置添加额外的代码。

来源

2013-02-11 19:32:14 Anders

看这个fiddle。我加检查，如果max是观察到的，订阅它：

if (ko.isObservable(options.max)) { 
    options.max.subscribe(function(newValue) { 
     $(element).slider('option', 'max', newValue); 
    }); 
    options.max = ko.utils.unwrapObservable(options.max); 
}

来源

2013-02-11 19:19:58

如何将jQuery UI选项绑定到敲除可观察对象

回答

相关问题