Question

我有一个从列表中创建的表。我有一个添加到该列表的按钮。这真的很简单，但似乎无法找出我所缺少的东西。这是我的代码：

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

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

Answer 1

Fist off，我woudnt在你的viewmodel构造函数中调用apply bindings。

将您的模型实例传递给它。

我会在添加函数中删除你的真值检查的！= null，因为你从来没有把它设置为null但是看起来它可能是未定义的或''

Names

应该是

names

尝试像这样调用推送

self.names.push(self.newValue);

您需要observable通知视图更新，因此不要直接推送到底层数组。

KO Foreach绑定不更新迭代列表

1 个答案: