我在淘汰赛中遇到了一些问题。我正在尝试制作评论版的页面。 在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},
...
]}
我的观点模型是:
$(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数组来查找在发送到服务器之前检查/取消选中哪些项目,因为表可以包含数千行,我认为它会受到性能影响。 有没有正确的方法来找出使用knockoit改变了哪些行?我的想法是在复选框值更改时创建单独的数组并添加/删除项目。但我不知道如何处理点击checbox正确的方式。有可能吗?
答案 0 :(得分:3)
我为Knockout添加了一个更改跟踪实用程序到NuGet和codeplex。您可以从其中一个链接中获取它。 http://kochangetracker.codeplex.com/或https://nuget.org/packages/Knockout.ChangeTracker
答案 1 :(得分:1)
我已经在jsFiddle http://jsfiddle.net/AlfeG/vMU7z/3/上复制了代码(不包括ajax部分)
在我看来,你所遇到的唯一错误就是映射:
ko.mapping.fromJS(result.Comments, self.Comments);
映射插件的第二个参数是mapping configuration。所以正确的用法是:
ko.mapping.fromJS(result.Comments, {}, self.Comments);
self.Comments
也可以指定为ko.observableArray()
但我不知道如何处理点击checbox的正确方法。有可能吗?
正如您在演示中看到的那样,KnockoutJS正在跟踪所有对复选框的更改。因此,您可以通过viewModel对象轻松访问数据。