Knockout JS: щелчок для редактирования в таблице - PullRequest
Новая
       25

Knockout JS: щелчок для редактирования в таблице

0 голосов
/ 22 января 2020

Прежде всего я использую нокаут 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" />

спасибо за вашу помощь

1 Ответ

1 голос
/ 23 января 2020

Проблема заключается в создании новой строки, которая ограничивает наблюдаемую величину до hasFocus: 

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

При создании строки ранее сфокусированная строка *1006* теряет фокус, что приводит к 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" />
...