我有一个AJAX MVC Contrib Grid实现,它已经存在,现在我正试图利用一些淘汰功能。。。我想知道在不改变整个网格实现的情况下,这是否可行。
这是刷新网格函数,用于在分页更改时设置容器html。
scope.refreshGrid = function (container, url) {
if (url)
container.data(scope.selectors.actionUrlAttribute, url);
$.post((url || container.data(scope.selectors.actionUrlAttribute)), scope.getParams(),
function(html) {
container.html($(html).html());
scope.bindDeleteButtons();
}).done(function() {
container.trigger("refresh.ctb.grid");
});
}
网格的一列是使用Html.Partial
的自定义列,如下所示:
column.Custom(x => Html.Partial("_CartSelection", new CartSelection(x.Id)));
部分视图具有以下标记,其中包含一些敲除数据绑定
<input type="checkbox" value="@Model.Id" data-bind="enable: (selectionEnabled() || $element.checked), checked: selectionIds" />
这适用于结果的第一页,当选择分页来更改页面并且更新容器html((时,绑定不再工作,但KO视图模型仍然具有正确的selectionIds
。。这正是我所期望的。
KO视图模型如下所示,其中网格有一个包装器父div
,id
为"cart":
$(function() {
var viewModel = new IP.Configuration.CartSelector(new IP.Router());
ko.applyBindings(viewModel, document.getElementById("cart"));
});
我已经在其他帖子中看到了关于如何不应该重新应用绑定的评论。在我的情况下,我似乎想应用绑定,但只应用于正在动态加载的一些子节点。
这可能吗?
更新:通过在每个复选框中添加一个cart-selection
类,并在viewModel上的rebind
函数中执行以下操作,其中self
是viewModel:
$("#cart .cart-selection").each(function(index, item) {
ko.applyBindings(self, item);
});
然后在重新加载内容时,对刷新网格的自定义触发器执行以下操作。
$("#cartGrid").on("refresh.ctb.grid", function() {
viewModel.rebind();
});
我目前发现的问题是,无论$element.checked
绑定如何,复选框都不再启用。。也许一个值HasMuted会解决这个问题,仍然在调查这个问题。
我弄清楚了剩下的问题是什么,这是由于数据绑定的顺序造成的。
enable
数据绑定需要放在checked
绑定之后,因为它通过$element.checked
对它有依赖性,这在实现后现在是有意义的!!
我将我的重新绑定功能略微更改为以下内容:
var gridResult = $("#cartGrid table");
if (gridResult.length > 0)
ko.applyBindings(this, gridResult[0]);
每次刷新都会带来一个新表,但至少现在,如果我向网格结果中的其他元素添加更多绑定,它们将按预期工作。