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

最好的方法是使用knockout提供的现有options绑定来获得视图模型中某个数组或可观察数组与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绑定中，您也可以传递包含有效configuration options的对象，如下所示：

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

检查此工作fiddle。

Answer 2

如果我写了你的问题（道歉，如果我不:)）...你试图将DOM上的更改反映回绑定到元素的observable。如果是这种情况，那么您需要做的就是在“onChange”回调中添加更改插件更改事件的observable值的代码。所以修改类似于

 $(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中的更改。您可以在此处将所选值应用于您的observable。在update中，您需要使用您的observable的当前值更新视图。每次可观察变化时，update都会运行。如果您没有实施update方法，那么如果您从其他地方修改了observable，则此更改不会被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 } };

结合敲除绑定与selectOrDie

3 个答案: