Question

使用淘汰赛2.2.0 我正在尝试使用相同的对话框进行添加和编辑。我的代码大部分都在工作，但是当我用新编辑的代码替换observable时，它不会导致foreach中的更新（或者至少它继续显示旧值）它会更新实际模型，因为我可以在开发工具中看到。我甚至试图用.valueHasMutated（）强制更新，但没有运气。

self.editReference = function () {
    self.isEdit(true);
    self.open();
    self.dialogReferences(this);
};

self.saveEditReference = function () {
    self.references.replace(this, self.dialogReferences);
    self.references.valueHasMutated();
    self.dialogReferences(newReferences());
    self.close();
};

以下是HTML代码参考部分的部分视图：

                    <ul class="sortable references-summary" data-bind="foreach: references">
                        <li class="ui-state-default"><b>Name: </b><!-- ko text:name --><!-- /ko--><br /><b>Company: </b><!-- ko text:company --><!-- /ko--><a href="#" data-bind="click: $parent.removeReference"><span class="ui-icon ui-icon-closethick"></span></a><a href="#" data-bind="    click: $parent.editReference"><span class="ui-icon ui-icon-wrench"></span></a></li>
                    </ul>

Answer 1

感谢CrimsonChris指出我的错误。下面更新的代码按预期工作。

除了数组中的引用之外，方法是使用您正在编辑的引用。开始编辑时，将数组中的值复制到编辑参考中。保存编辑时，将其复制回来。 valueHasMutated无需工作。

function reference(name, company) {
  return {
    name: ko.observable(name),
    company: ko.observable(company)
  };
}

// Copy r1 into r2
reference.copy = function(r1, r2) {
  r2.name(r1.name());
  r2.company(r1.company());
}

var self = {
  editingReference: undefined,
  dialogReferences: reference('', ''),
  references: ko.observableArray([
    reference('One', 'First Company'),
    reference('Two', '2nd Company')
  ]),
  dialogIsOpen: ko.observable(false),
  open: function() {
    self.dialogIsOpen(true);
  },
  close: function() {
    self.dialogIsOpen(false);
  }
};

self.editReference = function(item) {
  self.editingReference = item;
  self.open();
  reference.copy(item, self.dialogReferences);
};

self.removeReference = function(item) {
  self.references.remove(item);
  self.close();
};

self.saveEditReference = function(item) {
  reference.copy(item, self.editingReference);
  self.close();
};

ko.applyBindings(self);

<link href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js"></script>
<ul class="sortable references-summary" data-bind="foreach: references">
  <li class="ui-state-default"> <b>Name: </b>

    <!-- ko text:name() -->
    <!-- /ko-->
    <br /> <b>Company: </b>

    <!-- ko text:company() -->
    <!-- /ko--> <a href="#" data-bind="click: $parent.removeReference"><span class="ui-icon ui-icon-closethick"></span></a>
    <a href="#" data-bind="click: $parent.editReference"><span class="ui-icon ui-icon-wrench"></span></a>

  </li>
</ul>
<div data-bind="if: dialogIsOpen">
  <div data-bind="with:dialogReferences">
    <label>Name</label>
    <input data-bind="value:name" />
    <br/>
    <label>Company</label>
    <input data-bind="value:company" />
    <input type="button" value="Save" data-bind="click: $parent.saveEditReference" />
  </div>
</div>

Foreach不更新HTML列表元素

1 个答案: