KO Foreach 绑定不更新迭代列表



我有一个从列表创建的表。我有一个添加到该列表中的按钮。这真的很简单,但似乎无法找出我错过了什么。这是我的代码:

<table>
  <thead>
    <th>Value</th>
    <th>Remove</th>
  </thead>
  <tbody data-bind="foreach: names">
    <tr>
      <td>
        <span data-bind="text: $data"></span>
      </td>
      <td>
        <img id="Remove" width="20px" height="20px" src="/Content/Images/delete.png" data-bind="click: $parent.removeValue">
      </td>
    </tr>
  </tbody>
</table>
<div>
  <h2>
    <span data-bind="text: addValueError"></span>
  </h2>
  <label for="addValue">Add Value</label>
  <input id="addValue" type="text" data-bind="value: newValue" />
  <img id="add" width="20px" height="20px" src="/Content/Images/add.png" data-bind="click: addNewValue">
</div>
<script type="text/javascript">
    var model= new Model($('#someDiv')[0], data);
</script>

JavaScript:

function Model($id, data) {
    var self = this;
self.names = ko.observablearray(['1','2','3']);
self.removeValue = function(){
//remove
}
self.addValueError = ko.observable();
self.newValue = ko.observable();
self.addNewValue = function(){
if (self.newValue () != null && self.newValue ().length > 0) {
            self.Names().push(self.newValue ());
            self.newValue ('');
            self.addValueError ('');
        } else {
            self.addValueError ('Please provide a value to add.');
        }
};
ko.applyBindings(self, $id);
}

当我添加一个值时,它会添加到名称列表中,但它不会在表中更新。有什么想法吗?

拳头,我在你的视图模型构造函数中调用应用绑定。

将模型实例传递到其中。

我会删除 != null 以检查您的真相 n 添加函数,因为您从未将其设置为 null,但从外观上看,它可能未定义或 ''

Names 

应该是

names

尝试像这样调用推送

self.names.push(self.newValue);

您需要可观察量来通知视图更新,因此不要直接推送到底层数组。

相关内容

  • 没有找到相关文章

最新更新