Knockout JS和Chosen multiselect无效

Question

我正在使用knockout js和所选的插件(https://github.com/harvesthq/chosen)来尝试做一个好看的多选.

我已尝试过各种方法,但无法使用多选项来处理我正在使用的数据.当我单击多选时,即使选项绑定包含正确的数据,也不会显示任何值.

HTML:

<select multiple="multiple" data-bind="options: allCustomers, 
selectedOptions: event().customers, optionsText: 'name', 
optionsValue: 'id', chosen: true " ></select>?

视图模型的简化版本:

    function Event()
    {
        this.customers = ko.observableArray();
    };                     

    //for chosen plugin
    ko.bindingHandlers.chosen = {
        update: function(element, valueAccessor, allBindingsAccessor, viewModel)  {
            $(element).chosen();
        }
    }

    function ViewModel()
    {   
        this.event = ko.observable(new Event());
        this.allCustomers = ko.observableArray();
    };

    var viewModel = new ViewModel();

    $.getJSON("/get_json", function(data) 
    {                                  
        for (var c = 0; c < data.customers.length; c++)
        {
            viewModel.allCustomers.push(data.customers[c]);
        }   
    });

    ko.applyBindings(viewModel);   

PHP:

function get_json()
{
    $eventData = array(
        'customers' => array(array('name' => 'Bob', 'id' => 1), array('name' => 'John', 'id' => 2)),
        'moreData' => array(),
        'evenMoreData' => array()
        );

    echo json_encode($eventData);
}

这将显示所选样式的选择框,但当我单击它时,不会显示任何选项.

当我创建了客户视图模型本地JS数组,并传递到allCustomers,多选正常工作(见我的jsfiddle),所以它是与从服务器获取数据,但我已经在这个一直盯着而且看不出问题!

任何帮助非常感谢

Answer 1

在@Tyrsius建议在初始绑定后可能没有更新数据后,我发现了这个问题.

我$(element).trigger("liszt:updated");像这样添加到自定义绑定:

ko.bindingHandlers.chosen = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel)  {
        $(element).chosen();
        $(element).trigger("liszt:updated");
    }
}