首先,我使用Knockout js。
因此,我有一个可以动态添加和删除行的表,我的问题是我想在表中为每一行添加一个单击编辑,但它不起作用。一旦添加第二行,我将无法进行编辑。这是我的代码,您只需将其复制并粘贴到JSFiddle中,它将进一步说明我在说什么。

这是我的代码:



(function () {
var ViewModel = function () {
    var self = this;

    //Empty Row
    self.items = ko.observableArray([]);

		self.editing = ko.observable(true);

    self.edit = function() { this.editing(true) }

    self.addRow = function () {
        self.items.push(new Item());
    };

    self.removeRow = function (data) {
        self.items.remove(data);
    };
}

var Item = function (fname, lname, address) {
    var self = this;
    self.firstName = ko.observable(fname);
    self.lastName = ko.observable(lname);
    self.address = ko.observable(address);
};

vm = new ViewModel()
ko.applyBindings(vm);

})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />

<table class="table table-bordered">
  <thead class="mbhead">
    <tr class="mbrow">
      <th>Input</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Address</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: items">
    <tr>
      <td>
        <select class="form-control common-input-text" data-bind="event: { change: $root.addNewItem }">
          <option value="">One</option>
          <option value="">Two</option>
          <option value="">Three</option>
        </select>
      </td>
      <td>
        <b data-bind="uniqueName: true,visible: !($parent.editing()), text: firstName, click: function() { $parent.editing(true) }"></b>
        <input data-bind="uniqueName: true, visible: $parent.editing, value: firstName, hasFocus: $parent.editing" />
      </td>
      <td><span class="input-small" data-bind="value: lastName" /></td>
      <td><span class="input-small" data-bind="value: address" /></td>
      <td>
        <input type="button" value="Remove Row" data-bind="click: $parent.removeRow" class="btn btn-danger" />
      </td>
    </tr>
  </tbody>
</table>
<input type="button" value="Add Row" class="btn btn-primary" data-bind="click: addRow" />





感谢您的帮助

最佳答案

问题在于创建一个新行,该行将可观察范围限制为hasFocus

<input data-bind="uniqueName: true,
                  visible: $parent.editing,
                  value: firstName,
                  hasFocus: $parent.editing" /> <-- the problem cause


创建行时,先前聚焦的行失去焦点,这导致editing设置为false

因此解决方案是仅使用可观察值(而不是限制可观察值本身):

<input data-bind="uniqueName: true,
                  visible: $parent.editing,
                  value: firstName,
                  hasFocus: $parent.editing()" /> // <-- call the observable


但更好的方法是在Item视图模型中添加一个称为isFocused的可观察对象,并改为使用它:

var Item = function (fname, lname, address) {
    var self = this;
    self.isFocused = ko.observable(true);
    // ... other observables ...
};

<input data-bind="uniqueName: true,
                  visible: isFocused(),
                  value: firstName,
                  hasFocus: isFocused" />

07-24 09:44
查看更多