1

这个小提琴展示了如何将 jQuery 滑块 'slide' 事件绑定到 Knockout observable。这需要如何更改才能将滑块的“最大”选项绑定到可观察对象？您是否必须创建一个全新的 ko.bindingsHandler 条目？还是可以使用现有的？

这是小提琴中的代码供参考。

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>

JS

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());
4

2 回答 2

3

看看这个小提琴。我添加了检查 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-11T19:19:58.293 回答
2

我有一组用于 KO 的 jQUery Ui 绑定。我还没有完成滑块，因为我在项目中不需要该控件。但是检查我的按钮绑定

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());取消观察对象并使用它来更新 jQuery 控件。此方法也可用于滑块，它是通用的，您不需要为每个设置添加额外的代码

于 2013-02-11T19:32:14.770 回答