淘汰赛JS：点击以编辑表格

debugcn 发表于 Dev

沙希德·奥德（Shahid Od）

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。