Knockout.js + MaterialiseCSS推送選定的值多選擇不工作

我想建立一個表單，我選擇多個人的任務，我需要能夠稍後更新任務。因此，我試圖按照在MaterializeCSS文檔中建議的方式重新初始化選擇框之前，將先前選定的受讓人推入observableArray。但是，這些選項在選擇框中未顯示爲選中狀態。Knockout.js + MaterialiseCSS推送選定的值多選擇不工作

首先，我爲我的受讓人使用Prototype。

function Assignee (data) { 
    var self = this; 
    self.id = ko.observable(data.id); 
    self.name = ko.observable(data.name); 
}

同樣的任務。

function Task (data) { 
    var self = this; 
    self.id = ko.observable(data.id); 
    self.title = ko.observable(data.name); 
    self.description = ko.observable(data.description); 
    self.startDate = ko.observable(data.start); 
    self.endDate = ko.observable(data.end); 
    self.assignees = ko.observableArray($.map(data.assignees, function (item) {return new Assignee(item)})); 
}

在我的視圖模型我有所有的可選項目爲選定的observableArray和其他。員工和受讓人都可觀察陣列是受讓人陣列。

function TaskViewModel (task) { 
    var self = this; 
    self.id = ko.observable(null); 
    self.title = ko.observable(null); 
    self.description = ko.observable(null); 
    self.task = ko.observable(task); 
    self.employees = ko.observableArray([]); 
    self.assignees = ko.observableArray([]); 

    Request(
    '/users/select/assignees', 
    'GET', 
    {}, 
    function (data) { 
     self.employees($.map(data, function (item) {return new Assignee(item)})); 
     if (task != undefined) { 
      task.assignees().forEach(function(item, index, array) { 
       self.assignees().push(item); 
      }); 
      $('select#task_edit_assignees').material_select(); 
     } 
    }); 
};

然後，我的HTML是這樣的：

<div class="input-field col s12"> 
    <select id="task_edit_assignees" data-bind="options: employees, selectedOptions: assignees, optionsText: 'name', optionsCaption: 'Choisissez un ou plusieurs employés'" multiple></select> 
    <label for="task_edit_assignees">Assigner à</label> 
</div>

來源

2017-03-15 Youmy001

你'assignees'是'id'值的數組（右？）。 'task.assignees（）'也是'id'數組嗎？ – user3297291

他們都是受讓人的陣列。 – Youmy001

此數據綁定選項'optionsValue：'id''告訴淘汰賽將所選項目的屬性'[「id」]'存儲在'assignees'中。如果您刪除此選項，則存儲實際參考。 – user3297291

有一個在你的代碼中的幾個問題。第一個很容易：self.assignees().push(item);正在推送項目到底層數組，而不是可觀察的，因爲在項目被推動之前解開可觀察項的額外括號。這可以防止敲除知道數組已更改，並且不會觸發更新。

其次，雖然整個概念有點不妥，因爲您的員工數組和您的受理人數組包含完全不同的對象。即使每個對象中的值可能匹配，它也是對象的一個單獨的「實例」，並且不會相同。

這將始終返回false：new Task({id: 1}) == new Task({id: 1})

你可以做的，而不是上只存儲所選陣列（TaskViewModel.assignees）在IDS計劃。由於您已經使用optionsValue：'id'，綁定不需要更改。只需修改您的回調函數看起來像這樣：

self.employees($.map(data, function (item) {return new Assignee(item)})); 
    if (task != undefined) { 
     task.assignees().forEach(function(item, index, array) { 
      self.assignees.push(item.id()); 
     }); 
     $('select#task_edit_assignees').material_select(); 
    } 
}

例如jsFiddle

來源

2017-03-15 18:02:03

Knockout.js + MaterialiseCSS推送選定的值多選擇不工作

回答

相關問題