नॉकआउट जेएस और चुने गए मल्टीइलेक्ट काम नहीं कर रहे

Question

मैं नॉकआउट जेएस और चुने हुए प्लगइन (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); 

पीएचपी:

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

यह चुने गए स्टाइल सलेक्ट बॉक्स से पता चलता लेकिन जब मैं उस में क्लिक करें, कोई विकल्प नहीं दिखता है।

जब मैं ग्राहकों के लिए दृश्य मॉडल में एक स्थानीय जेएस सरणी बनाता हूं और सभी ग्राहकों को पास करता हूं, तो बहुआयामी सही तरीके से काम करता है (मेरा 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"); 

    } 
}