javascript - 使用 Knockout JS 跟踪表中的更改

标签 javascript knockout.js

我在 knockout js 方面遇到一些问题。我正在尝试创建评论审核页面。 在 Web 服务中,我获取所有评论并将它们转换为 JSON。 结果 JSON 如下所示:

{"Comments":[{"Title":"Title-01","Body":"Body-01","Id":41,"IsDeleted":false},
{"Title":"Title-02","Body":"Body-02","Id":41,"IsDeleted":true},
{"Title":"Title-03","Body":"Body-03","Id":41,"IsDeleted":true},
{"Title":"Title-04","Body":"Body-04","Id":41,"IsDeleted":false},
...
]}

我的 View 模型是:

    $(document).ready(function() {
        var moderationViewModel = function () {
            var self = this;
            this.Comments = ko.mapping.fromJS([]);
            this.GetComments = function () {
                $.ajax({
                  type: "POST",
                  url: "Web service url",
                  contentType: "application/json; charset=utf-8",
                  success: function (data) {
                    self.SuccessfullyRetrievedCommentsFromService(data);
                  }
                });
             };

             this.SuccessfullyRetrievedCommentsFromService = function (result) {
                ko.mapping.fromJS(result.Comments, self.Comments);
             };
       };

       var moderationCommentsViewModel = new moderationViewModel();
       moderationCommentsViewModel.GetComments();
       ko.applyBindings(moderationCommentsViewModel);  
});

表格的标记是:

<table class="actable">
  <colgroup>
    <col width="575px" />
    <col width="25px" />
  </colgroup>
  <tbody>
    <!-- ko foreach: Comments -->
    <tr>
      <td>
        <h5><q data-bind="text: Title() + ' (' + Id() + ')'"></q></h5>
        <p data-bind="text: Body"></p>
      </td>
      <td class="tcenter">
        <input type="checkbox" data-bind="checked: IsDeleted">
      </td>
    </tr>
    <!-- /ko -->
  </tbody>
</table>

在服务器端,我有一个数据库,用于存储有关评论的信息。编辑可以检查评论是否已删除,该评论不会向本侧访客显示。 我想以某种方式跟踪 html 表中已更改(选中/未选中)的行并将它们传递给 Web 服务。如果选中/取消选中评论复选框,我必须更改数据库表中有关其状态的信息。 我不想遍历整个 Comments 数组来查找在发送到服务器之前检查/取消检查哪些项目,因为表可以包含数千行,我认为这会影响性能。 有没有正确的方法可以使用knoit找出哪些行被更改?我的想法是创建单独的数组,并在复选框值更改时向其中添加/删除项目。但我不知道如何正确处理复选框的点击。可能吗?

最佳答案

我在 NuGet 和 codeplex 上添加了 Knockout 的更改跟踪实用程序。您可以从这些链接之一获取它。 http://kochangetracker.codeplex.com/https://nuget.org/packages/Knockout.ChangeTracker

关于javascript - 使用 Knockout JS 跟踪表中的更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9247758/

相关文章:

javascript - 下拉菜单的关闭列表

javascript - 使元素上的悬停效果仅持​​续有限的时间

javascript - 如何使用 php 将网络摄像头捕获的图像存储在指定文件夹中,并将捕获的图像路径存储在 mysql 数据库中?

javascript - knockout "with"绑定(bind)、级联下拉、重新加载选定值不起作用

knockout.js - MVC 4 knockout 列表

javascript - 如何构建 JavaScript 正则表达式来提取数字

javascript - 如何使用 for 循环查找字符串中的最大数

javascript - 不使用按钮显示列表,带 knockout

knockout.js - knockout foreach 与交替类

javascript - Notepad++ 模板崩溃问题