0

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

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

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

4

1 回答 1

3

拳头，我不会在您的视图模型构造函数中调用应用绑定。

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

我会删除 != null 以检查 add 函数的真值，因为您从未将其设置为 null 但从外观上看它可能是未定义的或 ''

Names

应该

names

尝试像这样调用 push

self.names.push(self.newValue);

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

于 2012-12-14T06:22:46.457 回答