使用映射时将项目添加到敲除js中的可观察数组

Question

我将一些 JSON 映射到一个称为角色的 observablearray 并在我的页面上显示它。这工作正常。我现在添加了几个输入字段，因为我想在我的模型上调用 addRole 的数组中添加一些项目。但是如何获取我在下面 self.addRole 的输入字段中输入的值？

<ul data-bind="foreach: roles" id="rolesContainer">
 <li><div data-bind="attr:{class: css}"></div><span data-bind="text: rolename"></span></li>
</ul>
<div  id="rolesContainer2">
 <input data-bind='value: rolename' />
 <input data-bind='value: css' />
 <button data-bind="click: addRole">Add</button> 
</div>


var roleViewModel=new RoleModel();
function RoleModel(){
    var self=this;
    self.roles=ko.observableArray();

    self.addRole = function(item) {
        self.roles.push({ name: item.rolename, css: item.css });
    };
}

function getRolesSuccess(data) {
    roleViewModel.roles=ko.mapping.fromJS(data);
    ko.applyBindings(roleViewModel, $("#rolesContainer")[0]);   
    ko.applyBindings(roleViewModel, $("#rolesContainer2")[0]);    
}
};

Answer 1

您需要在RoleModel 中为两个输入字段定义可观察的属性：css 和rolename。然后你需要在你的addRole方法中使用这两个属性

function RoleModel() {
    var self = this;
    self.roles = ko.observableArray();
    self.rolename = ko.observable();
    self.css = ko.observable();
    self.addRole = function (item) {
        self.roles.push({
            rolename: self.rolename(),
            css: self.css()
        });
        self.rolename(null);
        self.css(null);
    };
}

演示JSFiddle.

旁注：调用roleViewModel.roles=ko.mapping.fromJS(data); 应该是roleViewModel.roles(ko.mapping.fromJS(data));，因为您的代码用一个新数组覆盖了已经存在的可观察数组，而另一个保留可观察数组只是为其分配了一个新值。