具有更新功能的淘汰赛自定义 select 活页夹

Question

我正在尝试开发自定义 select 活页夹，但我无法理解如何开发更新功能。目前 this 是我所做的。我想要自定义活页夹来处理此类数据

[{
    message: "Hello",
    Value: 1
}, {
    message: "Hi",
    Value: 2
}, {
    message: "Bye",
    Value: 3
}, ]

Answer 1

问题，据我了解：您正在使用 Bootstrap Fullscreen Select，您可以对其进行初始化，但是当您 select 一个新值时，没有可观察值得到更新。基本上，我们需要知道新值何时被 selected.

由于小部件的工作方式是弹出一个选项屏幕并允许您select一个，然后关闭该弹出窗口，和小部件提供执行 onClose 回调的能力，这就是我们所需要的。

我在 select 中使用 value 绑定的标准约定。当小部件关闭时，如果新值与绑定值不同，我会将绑定值更新为小部件中的新值select。

ko.bindingHandlers.menu = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var valueObservable = allBindingsAccessor().value;
        $(element).mobileSelect({
            onClose: function () {
                var newValue = $(this).val();
                if (newValue !== valueObservable()) {
                    valueObservable(newValue);
                }
            }
        });
    }
};

作为 fiddle：http://jsfiddle.net/4zsu9pv2/4/

具有更新功能的淘汰赛自定义 select 活页夹

knockout custom select binder with update function

javascript

jquery

custom-binding

knockout.js