javascript - knockout 应用绑定(bind)到从ajax mvc contrib网格动态加载的html

Question

我有一个 AJAX MVC Contrib Grid 实现，它已经存在，现在我正处于一种情况，我正在尝试附加一些 knockout 功能......我想知道这是否可以在不更改整个网格实现的情况下实现.

这是刷新网格函数，用于在分页更改时设置容器 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))); 

部分 View 具有以下标记以及一些 knockout 数据绑定(bind)

<input type="checkbox" value="@Model.Id" data-bind="enable: (selectionEnabled() || $element.checked), checked: selectionIds" />

这适用于结果的第一页，当选择分页来更改页面并且更新容器 html() 时，绑定(bind)不再起作用，但 KO viewModel 仍然具有正确的 selectionIds ..这正是我期望发生的事情。

KO View 模型的应用如下所示，其中网格有一个包装器父级 div，id 为“cart”:

    $(function() {
        var viewModel = new IP.Configuration.CartSelector(new IP.Router());
        ko.applyBindings(viewModel, document.getElementById("cart"));
    });

我已经在其他帖子中看到关于如何不应重新应用绑定(bind)的评论。就我而言，我似乎想应用绑定(bind)，但仅限于动态加载的某些子节点。

这可能吗？

更新: 通过向每个复选框添加一个 cart-selection 类并在 viewModel 上的 rebind 函数中执行以下操作，几乎可以实现此目的，其中 self 是 View 模型:

        $("#cart .cart-selection").each(function(index, item) {
            ko.applyBindings(self, item);
        });

然后在重新加载内容时在自定义触发器上执行以下操作以刷新网格。

        $("#cartGrid").on("refresh.ctb.grid", function() {
            viewModel.rebind();
        });

我目前发现的问题是，无论 $element.checked 绑定(bind)如何，复选框都不再启用。也许 valueHasMutated 会解决这个问题，仍在研究这个问题。

Answer 1

我弄清楚了剩下的问题是什么，这是由于数据绑定(bind)的顺序造成的。

enable 数据绑定(bind)需要放置在 checked 绑定(bind)之后，因为它通过 $element.checked 依赖于它，这使得意识到之后现在就感觉!!

我将重新绑定(bind)功能稍微更改为以下内容:

var gridResult = $("#cartGrid table");
if (gridResult.length > 0)
    ko.applyBindings(this, gridResult[0]);

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