Knockout JS và Chosen multiselect không hoạt động

Question

Tôi đang sử dụng jacks loại trực tiếp và plugin được chọn (https://github.com/harvesthq/chosen) để thử và tạo một lựa chọn tốt.

Tôi đã thử nhiều cách khác nhau nhưng không thể chọn nhiều lựa chọn để làm việc với dữ liệu tôi đang sử dụng. Khi tôi bấm vào multiselect, không có giá trị được hiển thị mặc dù các tùy chọn ràng buộc có chứa các dữ liệu chính xác.

HTML:

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

phiên bản đơn giản của mô hình điểm:

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

Điều này cho thấy lựa chọn theo kiểu chọn hộp nhưng khi tôi nhấp vào trong nó, không có tùy chọn nào xuất hiện.

Khi tôi tạo một mảng JS cục bộ trong mô hình chế độ xem cho khách hàng và chuyển nó vào allCustomers, multiselect hoạt động chính xác (xem jsfiddle) của tôi, vì vậy nó liên quan đến việc lấy dữ liệu từ máy chủ, nhưng tôi đã nhìn chằm chằm vào điều này một lúc và không thể nhìn thấy vấn đề!

Bất kỳ giúp nhiều đánh giá cao

Answer 1

tôi thấy vấn đề sau @Tyrsius gợi ý nó có thể không được cập nhật các dữ liệu sau khi ràng buộc ban đầu.

tôi thêm $(element).trigger("liszt:updated"); đến phong tục ràng buộc như vậy:

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

Answer 2

Mã trong phiên bản được chấp nhận đối với một số lý do không làm việc cho tôi. Có lẽ vì lệnh liszt:updated không kích hoạt được chọn để được cập nhật. Dựa trên tài liệu here Tôi đã viết phiên bản của riêng mình:

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

    } 
}