7

我正在使用 knockout.js。我陷入了一个有点奇怪的境地（这很难解释，但我正在努力，如果我不清楚，对不起）。我在单个选择列表上使用自定义绑定和选项绑定：

  <select data-bind="options : arrayOfOptions, optionsText: 'Name', 
           optionsValue: 'Name', chosen: { }">
  </select>

ko.bindingHandlers.chosen = {
    init: function (element, valueAccessor, allBindingAccessor, 
                    viewModel, bindigContext) {
        var options = ko.utils.unwrapObservable(valueAccessor() || {});
        $(element).chosen(options);
    }
};

这里在运行时选择列表将填充arrayOfOptions数组中的所有可用选项，并且chosen是一个自定义绑定，我在选择列表上应用选择插件。

现在我在这里面临的问题是，在自定义绑定中，当我在选择列表上应用选择插件时，选择列表没有填充arrayOfOptions数组中的选项。简单来说custom binding就是在执行之前options binding。谁能给我一个解决方案，以便在选项绑定后应用自定义绑定？

4

4 回答 4

10

使用此绑定所依赖的 bindingHandler 名称数组创建一个 after 属性。

ko.bindingHandlers.chosen = { init: function (element, valueAccessor, allBindingAccessor, viewModel, bindigContext) { var options = ko.utils.unwrapObservable(valueAccessor() || {}); $(element).chosen(options); }, after:['options'] };

于 2014-09-03T16:25:36.217 回答
5

将您的呼叫移至chosen更新。

http://jsfiddle.net/jearles/avSfa/28/

--

ko.bindingHandlers.chosen = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        var allBindings = allBindingsAccessor();

        var options = {default: 'Select one...'};
        $.extend(options, allBindings.chosen)

        $(element).attr('data-placeholder', options.default);                
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).chosen();
    }
};

--

或者，您可以使用setTimeout将调用移动到chosen执行队列的底部。这将使 Knockout 选项绑定有时间在chosen尝试对其进行转换之前完成其工作。

ko.bindingHandlers.chosen = {
    init: function (element, valueAccessor, allBindingAccessor, 
                    viewModel, bindingContext) {
        var options = ko.utils.unwrapObservable(valueAccessor() || {});
        setTimeout(function() { $(element).chosen(options); }, 0);
    }
};
于 2012-11-03T16:22:29.680 回答
1 
ko.bindingHandlers.chosen = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    var options = allBindingsAccessor().options;

    options.subscribe(function (newValue) {
        $(element).chosen();
        $(element).trigger("chosen:updated");
    });

    var value = allBindingsAccessor().value;
    value.subscribe(function (newValue) {
        $(element).trigger("chosen:updated");
    });
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    if (element.options.length > 0) {
        $(element).chosen();
        $(element).trigger("chosen:updated");
    }
}

};

这对我有用 KO JS 3.0

于 2014-02-18T09:21:01.070 回答
0

虽然上面的答案可能会解决所提出的问题，但它们似乎无法自定义您选择的下拉菜单，例如通过传递 {'disable_search':true} 来禁用搜索。

我建议进行以下修改，以允许在绑定中传递选择的自定义。

<select data-bind="options : arrayOfOptions, optionsText: 'Name', 
    optionsValue: 'Name', chosen: { 'disable_search': true }">
</select>

ko.bindingHandlers.chosen = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var options = allBindingsAccessor().options;
        var chosenOptions = allBindingsAccessor().chosen;

        options.subscribe(function (newValue) {
            $(element).chosen(chosenOptions);
            $(element).trigger("chosen:updated");
        });

        var value = allBindingsAccessor().value;
        value.subscribe(function (newValue) {
            $(element).trigger("chosen:updated");
        });
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        if (element.options.length > 0) {
            var chosenOptions = allBindingsAccessor().chosen;
            $(element).chosen(chosenOptions);
            $(element).trigger("chosen:updated");
        }
    }
};
于 2014-07-08T17:41:48.940 回答