时间戳

首页 > 解决方案 > 在淘汰赛自定义绑定中，您如何知道哪个值触发了更新？

knockout.js - 在淘汰赛自定义绑定中，您如何知道哪个值触发了更新？

问题描述

B"H

我正在开发一个基于淘汰赛 js 的旧项目。我正在尝试创建一个自定义绑定（用于 select2），但我遇到了一堵砖墙，试图找出哪些属性（值）是改变的。

即我怎么知道选项列表是否刚刚改变？还是选择的值？

如果值列表刚刚更改，那么我需要重建 select2，将控件值设置为 null（否则默认选择第一项）。如果用户只是在列表中选择了一个项目，那么我真的不想做任何事情。绝对不要重建整个控件或将控件值设置为空。但是我找不到任何方法来查看哪些值发生了变化。

标签： knockout.js

解决方案

Knockout 中的每个 observable 都有订阅方法，所以如果你有

var myProp = ko.observable();

您可以订阅此道具的更改并在那里做所有必要的事情：

myProp.subscribe(function(newValue){
  console.log("value of prop changed to " + newValue);
});

我们确实通过以下方式为 jquery selected 插件实现了自定义选择绑定：

    ko.bindingHandlers.chosen =
    {
    init: function (element, valueAccessor, allBindings) {
        var values = valueAccessor(),
            $element = $(element);
        $element.chosen(ko.toJS(values));

        if (ko.isObservable(values.enable)) {
            values.enable.subscribe(function (value) {
                $element.prop('disabled', !value).trigger("chosen:updated");
            });
        }

        // trigger chosen:updated event when the bound value or options changes

        ['value', 'selectedOption', 'options'].forEach(function (e) {
            var bv = allBindings.get(e);
            if (ko.isObservable(bv))
                bv.subscribe(function () { $(element).trigger('chosen:updated'); });
        });

        var prop = allBindings.get('value');
        $element.off('change');
        $element.on('change', function (obj, event) {
            if (!event || !prop) {
                return;
            }
            if (typeof (prop()) == "number" && !isNaN(Number(event.selected))) {
                prop(Number(event.selected));
            } else {
                prop(event.selected);
            }
        });
    },
    update: function (element) {
        $(element).trigger('chosen:updated');
    }
};

推荐阅读