基因敲除与selectOrDie结合

Question

我希望能够在select元素上应用一个敲除绑定的selectOrDie，以一般地应用selectOrDie。

ko.bindingHandlers.selectOrDie = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        // This will be called when the binding is first applied to an element
        // Set up any initial state, event handlers, etc. here

        $(element).selectOrDie({
            onChange: function() {
                console.log(element);
            }
        });
    },
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        // This will be called once when the binding is first applied to an element,
        // and again whenever any observables/computeds that are accessed change
        // Update the DOM element based on the supplied values here.
        console.log($(element).siblings('span .sod_label').text());

    }
};

我不知道如何设置它，使selectOrDie注册的更改触发绑定的更新。还是有更好的方法？

这是select元素，没有什么特别之处：

            <select data-bind="selectOrDie: $data" data-custom-class="w60">
                <option>10</option>
                <option>20</option>
                <option>30</option>
                <option>50</option>
                <option>Alle</option>
            </select>

如何使剔除绑定一般地将selectOrDie应用于元素？

Answer 1

最好的方法是使用由剔除提供的现有选项绑定来获得视图模型中的某些数组或可观察的数组与select元素之间的双向数据绑定优度。

然后创建一个单独的绑定处理程序，允许将selectOrDie小部件应用到同一个select元素。下面是我在前面创建的selectOrDie绑定处理程序：

ko.bindingHandlers.selectOrDie = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        // apply selectOrDie widget to select element
        $(element).selectOrDie(valueAccessor());

        var subsription, options = allBindings()["options"];

        // check if bounded collection from "options" binding is observable array
        if(options && ko.isObservable(options) && "push" in options){
            // ensure changes to bounded collection update selectOrDie widget
            subscription = options.subscribe(function(){
                $(element).selectOrDie("update");
            });
        }

        // register disposal to clean up after dom node is removed
         ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            subscription.dispose();
            $(element).selectOrDie("destroy");
        });
    }
};

现在，这个绑定处理程序与现有的options绑定相结合，将允许您这样做：

<select data-bind="options: myArray, value: myValue, selectOrDie: { }">
</select>

注意，我已经将一个空对象传递到selectOrDie绑定中，您也可以传递一个包含有效配置选项的对象，如下所示：

<select data-bind="options: myArray, value: myValue, selectOrDie: {customClass: 'someclass' }">
</select>

检查一下这个工作的小提琴。

Answer 2

如果我收到你的问题，写(抱歉，如果我没有：).您正在尝试将DOM上的更改反映回绑定到元素的可观察性。如果是这样的话，那么您所需要做的就是添加代码，以更改插件更改事件上可观察到的值，在"onChange“回调中。所以修改就像

 $(element).selectOrDie({
            onChange: function() {
                var value = valueAccessor();
            value($(element).val()); //extract the value you wish to set to the observable here
            }
        });

我已经创建了一个不需要插件( https://jsfiddle.net/0Ljy13c0/4/ )的代码的简化版本。

Answer 3

用自定义绑定包装jQuery插件相当简单。您必须设置一种侦听init中更改的方法。在这里，您将将选定的值应用于您的可观测值。在update中，您需要用可观察到的当前值更新视图。每次发生可观察到的变化时，update都会运行。如果不实现update方法，那么如果从其他地方修改可观察到的内容，则select将不会反映此更改。

看起来，SelectOrDie为您提供了一个onChange函数来从<select>中获取更改，并提供了一个'update'选项来将更改应用于<select>。

ko.bindingHandlers.selectOrDie = {
    init: function (element, valueAccessor) {
        $(element).selectOrDie({
            onChange: function() {
                var value = valueAccessor(); //get observable
                value($(element).val()); //write to observable
            }
        });
    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()); //get current observable value
        $(element).val(value); //update selected value
        $(element).selectOrDie('update'); //inform SoD that something has changed
    }
};