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

まず、ビューモデルコンストラクターでapplyバインディングを呼び出すことはできません。

モデルのインスタンスをその中に渡します。

nullに設定したことはないので、add関数で真実をチェックするために！= nullを削除しますが、外観からは未定義または''である可能性があります。

Names

する必要があります

names

このようにプッシュを呼び出してみてください

self.names.push(self.newValue);

ビューが更新されるように通知するオブザーバブルが必要なので、基になる配列に直接プッシュしないでください。

于 2012-12-14T06:22:46.457 に答える