Knockout JS和選擇multiselect不工作

我使用基石js和選定的插件（https://github.com/harvesthq/chosen）來嘗試做出好看的多選。Knockout JS和選擇multiselect不工作

我已經嘗試了各種方法，但無法獲得multiselect以使用我正在使用的數據。當我點擊multiselect時，即使選項綁定包含正確的數據，也不會顯示任何值。

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數組並將其傳遞給所有客戶時，多重選擇工作正常（請參閱我的jsfiddle），因此這與從服務器獲取數據有關，但我一直盯着這一會兒，看不出問題！

任何幫助非常讚賞

來源

2012-07-06 peacemaker

如果您console.log（）'數組，它匹配本地測試版本？你在頁面上沒有javascript錯誤？ – Tyrsius 2012-07-06 20:39:45

正確，沒有錯誤，數組與本地測試版本匹配。 – peacemaker 2012-07-06 20:45:51

這可能是異步調用開始，然後綁定應用，然後異步返回並推送到視圖模型。當我將新客戶推入陣列時，他們沒有出現在選擇中，這告訴我所選擇的更新在初始綁定後不起作用。 – Tyrsius 2012-07-06 20:51:12

我發現這個問題@Tyrsius暗示它可能無法更新後的初始綁定後的數據。

我加$(element).trigger("liszt:updated");到自定義像這樣綁定：

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

來源

2012-07-06 20:56:52 peacemaker

不錯的工作，很高興我可以幫助=） – Tyrsius 2012-07-06 21:18:08

感謝您的幫助:) – peacemaker 2012-07-06 21:22:31

只想說感謝這個答案！ – Konstantin 2012-09-14 10:35:14

在接受的版本出於某種原因的代碼並沒有爲我工作。可能是因爲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"); 

    } 
}

來源

2014-02-21 18:11:15 kubal5003

是的，選擇改爲使用'選擇：更新'代替。請參閱https://stackoverflow.com/a/18852516/484072 – peacemaker 2017-05-23 15:23:00

Knockout JS和選擇multiselect不工作

回答

相關問題