Question

我有一张如下表格。用户应该在第三列中键入地址信息。如果它是空的，那么我添加了样式

 <tbody data-bind="foreach: people">
      <tr>
          <td data-bind="text: id"></td>
          <td data-bind="text: name"></td>
           <td><input type="text" style="width:100%"  data-bind="css:{warningStyle: address.length == 0 }, value: address"/></td>

          </tr>                                   
 </tbody>

要测试它，这是我在js中的people的代码

people = ko.observableArray([{id:'1', name:'a1', address:'aaa'},{id:'2', name:'a2', address:''}])

当我第一次加载页面时，它按预期工作。第一个人没有应用造型，第二个人有造型（因为地址是空的）。

现在我为第二个人键入了一些地址，它仍然应用了css样式。我的问题是为什么？不应该删除css样式因为地址不再是空的吗？我该如何解决这个问题？

Answer 1

发生这种情况是因为地址属性不可观察。您可以使用mapping插件修复它，或者不使用下一种方式修复它

var data = [{id:'1', name:'a1', address:'aaa'},{id:'2', name:'a2', address:''}];

function Item(id, name, address) {
    this.name = ko.observable(name);
    this.id = ko.observable(id);
    this.address = ko.observable(address);
}

//do some basic mapping (without mapping plugin)
var mappedData = ko.utils.arrayMap(data, function(item) {
    return new Item(item.id, item.name, item.address);
});

ko.applyBindings(mappedData);

<强> JSFIDDLE

基于用户输入敲除在foreach中的css绑定

1 个答案: