Question

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

有两个应用程序角色：“管理员”和“主持人”。示例用户具有1个角色“Administrator”。默认情况下不会选择此项。

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/

Answer 1

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

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

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

Answer 2

Knockout需要按值比较所选选项，在这种情况下为Id：optionsValue: 'Id'。而且你传递了一组Role个对象。您需要传递Id数组：

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

在加载时未选择多个选择selectedOptions的Knockout

2 个答案: