Knockout JS：在表格中点击编辑答案

【问题标题】：Knockout JS : click-to-edit in tableKnockout JS：在表格中点击编辑
【发布时间】：2020-05-08 20:51:49
【问题描述】：

首先我使用 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" />

感谢您的帮助

【问题讨论】：

标签： javascript html knockout.js knockout-mvc

【解决方案1】：

问题在于创建一个将可观察对象绑定到hasFocus 的新行：

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

在创建行时，previously-focused 行失去焦点，这导致 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" />

【讨论】：