6

我正在使用淘汰赛 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），因此它与从服务器获取数据有关，但我一直盯着这个虽然看不到问题！

非常感谢任何帮助

4

2 回答 2

16

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

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

ko.bindingHandlers.chosen = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel)  {
        $(element).chosen();
        $(element).trigger("liszt:updated");
    }
}
于 2012-07-06T20:56:52.347 回答
1

出于某种原因，接受版本中的代码对我不起作用。可能是因为该liszt:updated命令不会触发选择更新。根据此处的文档，我编写了自己的版本：

ko.bindingHandlers.chosen = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).chosen({ width: "95%", placeholder_text_multiple: "Select..." });
        var value = ko.unwrap(valueAccessor());
    },

    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var value = ko.unwrap(valueAccessor());
        $(element).trigger("chosen:updated");

    }
}
于 2014-02-21T18:11:15.047 回答