编辑功能在淘汰赛 js 中不起作用答案

【问题标题】：edit functionality is not working in knockout js编辑功能在淘汰赛 js 中不起作用
【发布时间】：2014-09-02 18:24:20
【问题描述】：

我刚刚使用 net.in 上提供的示例创建了一个可编辑的内容，当我尝试编辑网格时，它没有显示显示输入字段空白的值。任何人都可以帮忙吗？在编辑中我正在调用这个函数

  self.editFruit = function (fruit) {
        if (self.editingItem() == null) {
            // start the transaction
            fruit.beginEdit(self.editTransaction);

            // shows the edit fields
            self.editingItem(fruit);
        }
    };

这里是小提琴jsfiddle

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

在第一次评估绑定时，每个水果的可观察对象 (data-bind="value: name.editValue") 的 editValue 子可观察对象不存在。当您单击“编辑”链接时，会创建可观察的 editValue，但淘汰赛不知道它必须重新绑定。

您可以通过两种方式解决。

1 .围绕每个输入创建一个虚拟的if 绑定。当 if 变为 true 时，内容将重新插入 DOM 中，导致绑定重新评估。确保 editValue observable 附加到它的 parent BEFORE editingItem observable 设置，否则你处于同样的情况

<!-- ko if: $root.isItemEditing($data) -->
<input data-bind="..."></input>
<!-- /ko -->

2 。在绑定模型之前，确保所有的 observable 都将 editValue observable 附加到父 observable，在 beginEdit fn 中设置 editValue observable 的值。

function Fruit(data) {
  var self = this;
  self.name = ko.observable(data.name || "");
  self.name.editValue = ko.observable();

  self.rate = ko.observable(data.rate || "");
  self.rate.editValue = ko.observable();
}

ko.observable.fn.beginEdit = function (transaction) {
  ...

  if (self.slice)
    self.editValue(self.slice());
  else
    self.editValue(self());

  ...
}

【讨论】：