knockout.js - knockout - 是否可以将标准选择绑定(bind)与自定义绑定(bind)结合起来？

Question

这不起作用(调用自定义绑定(bind)但下拉列表为空)

<select id="parentArea" class="chosen-select" data-bind="
   chosen:{},
   options: parentAreas,
   optionsCaption: 'Choose...',
   optionsText: 'Label',
   value: selectedParentArea">
</select>

但这行得通(下拉已填满)

<select id="parentArea" class="chosen-select" data-bind="
   options: parentAreas,
   optionsCaption: 'Choose...',
   optionsText: 'Label',
   value: selectedParentArea">
</select>

我想向下拉列表添加自定义绑定(bind)，但不确定如何操作。

自定义绑定(bind)很简单

ko.bindingHandlers.chosen = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        console.log('chosen', element);
        $(element).chosen({});
    }
};

更新

.chosen({});

是来自另一段 Javascript (harvesthq.github.io/chosen) 的方法。

我意识到，当它被注释掉时，剩下的绑定(bind)工作。我真正需要的是运行“$(element).chosen ({});”在所有其他绑定(bind)完成之后。

更新 2

当我在应用所有绑定(bind)后手动应用“选择”时，效果很好。例如，我可以使用运行此 JS 的按钮

 function run() {
    $('.chosen-select').chosen({});
};    

我只需要在所有绑定(bind)完成后自动执行(回调函数？)。我不知道该怎么做。

更新 3

“parentAreas”不是静态数组。它是从网络服务加载的:

function ViewModel() {

    var self = this;

   self.init = function () {

        //load parent areas from web service
    };

    self.init(); //Running the init code
}

ko.applyBindings( new ViewModel());

我想在父区域准备好时初始化“选择的​​”框自定义绑定(bind)。

更新 4

新版本(可用但不可重用，因为它具有硬编码绑定(bind))

ko.bindingHandlers.chosen = { 初始化:函数(元素、值访问器、allBindingsAccessor、 View 模型、上下文){

        viewModel.parentAreas.subscribe(function(newParentAreas) {
            if (newParentAreas && newParentAreas.length > 0) {

                ko.applyBindingsToNode(element, {
                    options: viewModel.parentAreas,
                    optionsCaption: 'Choose...',
                    optionsText: 'Label',
                    value: viewModel.selectedParentArea
                });
                $(element).chosen({});
            }
        });
    }
};

//绑定(bind)只是 data-bind="chosen:{}

更新 5避免多重初始化(hacky 方式)

ko.bindingHandlers.parentAreaComboBox = {

    initialised: false,
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, context) {

        viewModel.parentAreas.subscribe(function (newParentAreas) {

            if (newParentAreas && newParentAreas.length > 0) {

                if (ko.bindingHandlers.parentAreaComboBox.initialised) {
                    return;
                }
                ko.applyBindingsToNode(element, {
                    options: viewModel.parentAreas,
                    optionsCaption: 'Choose...',
                    optionsText: 'Label',
                    value: viewModel.selectedParentArea
                });
                $(element).chosen({});
                ko.bindingHandlers.parentAreaComboBox.initialised = true;
            }
        });
    }
};

更新 6

我写了通用的解决方案(见下面我的回答)

Answer 1

这是一种依赖于绑定(bind)顺序的反模式。

如果您有一个自定义绑定(bind)需要其他绑定(bind)在其自身之前运行，您应该从自定义绑定(bind)中调用这些绑定(bind)

ko.applyBindingsToNode(element, { options: arr, value: val });

然后执行 $(element).chosen