knocket将绑定应用于从ajax mvc contrib网格动态加载的html

knockout apply binding to dynamically loaded html from ajax mvc contrib grid

本文关键字:动态 网格 加载 html contrib mvc 绑定 应用于 ajax knocket      更新时间:2023-09-26

我有一个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视图模型如下所示,其中网格有一个包装器父divid为"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]);

每次刷新都会带来一个新表,但至少现在,如果我向网格结果中的其他元素添加更多绑定,它们将按预期工作。