knocket将绑定应用于从ajax mvc contrib网格动态加载的html
knockout apply binding to dynamically loaded html from ajax mvc contrib grid
我有一个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]);
每次刷新都会带来一个新表,但至少现在,如果我向网格结果中的其他元素添加更多绑定,它们将按预期工作。
- 在有角度的ui网格中设置动态列的问题
- 动态生成网格样式问题
- 冻结动态网格的标题行
- 动态网格作为自定义指令
- Extjs 4,如何使用单个Json文件为多个动态网格发送多个元数据
- 具有垂直堆栈的动态网格布局
- 如何使用煎茶触摸制作动态网格视图
- 事件的动态网格菜单
- 使用 Angularjs 的动态网格
- 添加在动态网格视图中输入的值
- 使用 ExtJS 创建动态网格
- 使用控制器中对象的位置 x,y 创建一个动态网格或表格 - 引导程序,AngularJS
- 如何使用javascript创建动态网格
- 如何使用marionete.js创建动态网格视图
- Javascript-动态网格花式删除选项
- 动态网格角与条形码生成器
- 如何使用CSS和JavaScript创建可定制的动态网格布局
- 用Javascript创建一个动态网格
- 使用jquery制作动态网格
- Openlayers 3动态网格-如何打开和关闭它