Question

我将一些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]);    
}
};

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));，因为您的代码使用新代码覆盖已存在的可观察数组，而另一个使observablearray只为其分配新值。

使用映射时，在knockoutjs中将项添加到observablearray

1 个答案: