javascript - knockout 中的自定义下拉列表

Question

我正在尝试创建一种自定义下拉列表，它将有一个方法名称，从中获取其所有元素，并且在 knockout 模型绑定(bind)之前，它应该等待从给定的方法填充列表，然后启动其默认行为。

到目前为止，我成功地从给定方法填充了数据。但问题是我如何告诉 knockout 绑定(bind)等待我的 init 方法完成其异步工作。

ko.bindingHandlers.serviceMethod = {
        init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var serviceName, optionsValue, optionsText, value, optionsCaption, isCompleted;

        if (element.nodeName == 'SELECT') {                
            optionsValue = allBindings().optionsValue || 'value';
            optionsText = allBindings().optionsText || 'text';                
            serviceName = valueAccessor();               

            var l = $(element);
            serviceName.apply().done(function (results) {
                l.empty();
                $.each(results.List, function (j, result) {
                    l.append($("<option />").val(result[optionsValue] || '').text(result[optionsText] || ''));
                })                    
            });
        }
    },
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {

        //what to do now in order to let knockout wait for list to be populated
    }
 }

我的绑定(bind)是

<select name="state" data-bind="serviceMethod:registrationService.getAllStates,value: model.state" id="ddlState"></select>

Answer 1

您可以禁用输入元素，直到数据可用为止，Extender可以做到这一点。

标记:

<select data-bind="serviceMethod:getOptions, options: options, enable:options.enable></select>

View 模型:

function viewModel(){
    this.options=ko.observableArray().extend( { enabled:false});       
}

绑定(bind)处理程序:

ko.bindingHandlers.serviceMethod = {
     init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var getOptionsFunction=valueAccessor();
        // deferred implemented as a callback
        getOptionsFunction(function(r){
           allBindings().options(r);               
           // call extender observable to enable the input
           allBindings().options.enabled(true); 
        } );
    },
    update:function (element, valueAccessor, allBindings, viewModel, bindingContext) {
    }    

扩展器:

ko.extenders.enabled = function(target, option) {
    target.enabled=ko.observable(option);
    return target;
};

fiddle

注意:我会将逻辑移至 View 模型，在我们的项目中，我们犯了错误，在应该转到 viewModel 的绑定(bind)处理程序中放置了太多代码。