ノックアウトJSと選択したマルチセレクションが機能しない

Question

ノックアウト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"); 
    } 
} 

Answer 2

コードは私のために動作しませんでした。おそらくliszt:updatedコマンドが選択されたトリガを更新しないためです。 here私は自分自身のバージョンを書いた：

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"); 

    } 
}