使用 Knockout JS 进行 ajax 调用后刷新列表

Question

我有一个页面上的附件列表，它是使用 jQuery $.ajax 调用和 Knockout JS 生成的。

我的 HTML 看起来像（这被剥离了）：

<tbody data-bind="foreach: attachments">
  <tr>
    <td data-bind="text: Filename" />
  </tr>
</tbody>

我有一个函数可以获取作为 JSON 响应返回的附件列表：

$(function () {
  getFormAttachments();
});

function getAttachments() {
  var request = $.ajax({
    type: "GET",
    datatype: "json",
    url: "/Attachment/GetAttachments"
  });

  request.done(function (response) {
    ko.applyBindings(new vm(response));
  });
}

我的视图模型如下所示：

function vm(response) {
  this.attachments = ko.observableArray(response);
};

有一个刷新按钮，用户可以单击以刷新此列表，因为随着时间的推移，附件可能已被添加/删除：

$(function () {
  $("#refresh").on("click", getAttachments);
});

附件列表的初始渲染很好，但是当我通过刷新按钮再次调用getAttachments 时，单击列表被添加到（实际上每个项目都重复了多次）。

我在这里创建了一个 jsFiddle 来演示这个问题：

http://jsfiddle.net/CpdbJ/137

我做错了什么？

Answer 1

这是一个修复您的示例的小提琴。您最大的问题是您多次调用“applyBindings”。通常，您将在页面加载时调用 applyBindings，然后页面将与 View Model 交互以使 Knockout 刷新页面的某些部分。

http://jsfiddle.net/CpdbJ/136

html

<table>
    <thead>
        <tr><th>File Name</th></tr>
    </thead>
    <tbody data-bind="foreach: attachments">
      <tr><td data-bind="text: Filename" /></tr>
    </tbody>
</table>
<button data-bind="click: refresh">Refresh</button>

javascript

$(function () {
  var ViewModel = function() {
    var self = this;

    self.count = 0;
    self.getAttachments = function() {
      var data = [{ Filename: "f"+(self.count*2+1)+".doc" },
                  { Filename: "f"+(self.count*2+2)+".doc"}];
      self.count = self.count + 1;
      return data;
    }

    self.attachments = ko.observableArray(self.getAttachments());

    self.refresh = function() {
      self.attachments(self.getAttachments());        
    }
  };

  ko.applyBindings(new ViewModel());
});

--

您可能还想查看映射插件 - http://knockoutjs.com/documentation/plugins-mapping.html。它可以帮助您将 JSON 转换为视图模型。此外，它能够将属性分配为对象的“键”...这将用于确定后续映射中的旧对象和新对象。

这是我不久前写的一个小提琴来演示类似的想法：

http://jsfiddle.net/wgZ59/276

注意：我使用“更新”作为映射规则的一部分，但仅用于登录控制台。如果您想自定义映射插件如何更新对象，您只需要添加它。