Knockout.js 使用映射时向knockoutjs中的observablearray添加项

我正在将一些JSON映射到一个名为roles的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]);    
}
};

添加
var roleViewModel=new RoleModel（）；
函数RoleModel（）{
var self=这个；
self.roles=ko.observearray（）；
self.addRole=功能（项目）{
self.roles.push（{name:item.rolename，css:item.css}）；
};
}
函数getRolesSuccess（数据）{
roleViewModel.roles=ko.mapping.fromJS（数据）；
ko.applyBindings（roleViewModel，$（“#RoleContainer”）[0]）；
ko.applyBindings（roleViewModel，$（“#RoleContainer2”）[0]）；
}
};

您需要在

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);
    };
}

演示

---

旁注：调用

roleViewModel.roles=ko.mapping.fromJS（数据）

应该是

roleViewModel.roles（ko.mapping.fromJS（data））因为您的代码用一个新的数组覆盖了已经存在的可观察数组，而另一个保留了可观察数组，只是给它分配了一个新值。
谢谢。我认为ko.mapping实际上会定义属性，所以我不必这样做？不，映射插件只为源数据中的属性创建属性。我不会为您创建额外的属性来处理您需要自己添加的编辑或更新场景。