0

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

1 回答 1

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

演示JSFiddle。

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

于 2013-10-17T06:40:01.147 回答