剔除多选 selectedOptions 未在加载时选择答案

【问题标题】：Knockout multiple select selectedOptions not selected on load剔除多选 selectedOptions 未在加载时选择
【发布时间】：2012-11-11 02:56:57
【问题描述】：

我正在为用户创建一个编辑表单，在多选中默认情况下不会选择用户的角色。

有 2 个应用程序角色：“管理员”和“版主”。示例用户有 1 个角色“管理员”。默认不选择这个。

http://jsfiddle.net/jgT8s/4/

html:

<form data-bind="with: user">
    <select id="selectRoles"
        data-bind="options: $root.allRoles, selectedOptions: Roles, optionsText: 'Name', optionsValue: 'Id'"
        multiple="true"
        size="5">
    </select>
</form>

js:

var User = function () {
    var self = this;

    self.Id = ko.observable(1337);
    self.Username = ko.observable('pietpaulusma');
    self.Roles = ko.observableArray([{ Id: 1, Name: 'Administrator' }]);
};

function UserViewModel() {
    var self = this;

    self.user = ko.observable(new User());
    self.allRoles = ko.observableArray([{ Id: 1, Name: 'Administrator' }, { Id: 2, Name: 'Moderator' }]);
}

ko.applyBindings(new UserViewModel());

更新创建了一个dependentObservable 并将其映射到 selectedOptions

self.RoleIds = ko.dependentObservable(function () {
        return ko.utils.arrayMap(self.Roles(), function (role) {
            return role.Id;
        });
    });

工作版本：http://jsfiddle.net/jgT8s/5/

【问题讨论】：

这是一个关于dependentObservable 的好建议.. 可惜我们不得不走这么多路..

标签： knockout.js

【解决方案1】：

Knockout 需要按值比较选定的选项，在本例中为 Id：optionsValue: 'Id'。你正在传递一个Role 对象数组。您需要改为传递 Id 数组：

var User = function () {
    ...
    self.Roles = ko.observableArray([1]);
};

【讨论】：

首先回答但不是接受的答案.. ??来自我的 +1。
有谁知道如何使用对象而不是只有 ID？
这里的关键是，通过指定optionsValue:，即使您的options: 绑定指向对象数组，您也可以准确设置列表绑定的内容，我花了一段时间才掌握这个。

【解决方案2】：

问题是Roles 包含“完整”对象，而它应该只包含值部分：

self.Roles = ko.observableArray([1]);

看这里：http://jsfiddle.net/Vkda5/

【讨论】：

谢谢！我创建了一个dependentObservable，它返回所有角色的ID jsfiddle.net/jgT8s/5 如果淘汰赛映射了带有optionsValue 属性的对象。
@Bas：我同意 - 始终使用 optionsValue 会很棒。