Knockout.js + MaterializeCSS 在多选上推送选定的值不起作用答案

【问题标题】：Knockout.js + MaterializeCSS pushed selected values on Multiple select do not workKnockout.js + MaterializeCSS 在多选上推送选定的值不起作用
【发布时间】：2017-03-15 14:32:06
【问题描述】：

我正在尝试构建一个表单，我可以在其中选择多个人来执行一项任务，并且我需要稍后能够更新任务。因此，在按照 MaterializeCSS 文档中的建议重新初始化选择框之前，我试图将先前选择的受让人推送到 observableArray 中。但是，选择框中的选项未显示为选中状态。

首先，我为我的受让人使用原型。

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 用于所有可选项目，另一个用于选定项目。 employees 和 assignees observableArray 都是 Assignee 的数组。

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>

【问题讨论】：

您的assignees 是id 值的数组（对吗？）。 task.assignees() 也是ids 的数组吗？
它们都是Assignee的数组。
此数据绑定选项optionsValue: 'id' 告诉敲除将所选项目的属性["id"] 存储在assignees 中。如果您删除此选项，您将存储一个实际参考。
我删除了它，但它不再起作用了。我编辑了问题以反映以删除它。

标签： javascript jquery knockout.js materialize

【解决方案1】：

您的代码中有几个问题。第一个很简单：self.assignees().push(item); 将项目推送到 underlying 数组而不是 observable，因为在推送项目之前打开 observable 的额外括号.这可以防止敲除知道数组已更改并且没有触发更新。

其次，尽管整个概念有些缺陷，因为您的员工数组和受让人数组包含完全不同的对象。即使每个对象中的值可能匹配，但它是对象的单独“实例”并且不会相等。

这将始终返回 false：new Task({id: 1}) == new Task({id: 1})

您可以做的只是计划仅将 id 存储在您选择的数组 (TaskViewModel.assignees) 中。由于您已经在使用 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

【讨论】：