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推送选定的值多选择不工作

回答

相关问题