нокаут применить привязку к динамически загружаемому html из сетки ajax mvc contrib

У меня есть реализация 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 viewModel все еще имеет правильный selectionIds.. что я и ожидал .

Модель представления KO применяется, как показано ниже, где сетка имеет родителя-оболочку div с id «корзины»:

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

Я уже видел комментарии в других сообщениях о том, что вы не должны повторно применять привязки. В моем случае кажется, что я хочу применить привязки, но только к некоторым дочерним узлам, которые загружаются динамически.

Это возможно?

ОБНОВЛЕНИЕ: это почти сработало, добавив класс cart-selection к каждому флажку и выполнив приведенную ниже функцию rebind в модели представления, где self — это модель представления:

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

Затем выполните приведенные ниже действия для пользовательского триггера для обновления сетки при перезагрузке содержимого.

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

Проблема, с которой я столкнулся на данный момент, заключается в том, что флажки больше не активируются независимо от привязки $element.checked. Возможно, valueHasMutated исправит это, все еще изучая это.


javascript jquery asp.net-mvc-4 knockout.js mvccontrib-grid
person Pricey    schedule 21.07.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я понял, в чем заключалась моя оставшаяся проблема, это было связано с упорядочением привязок данных.

Привязку данных enable нужно было разместить после привязки checked, так как она зависит от нее через $element.checked, что имеет смысл теперь, после осознания этого!!

Я немного изменил свою функцию повторной привязки на следующую:

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

Каждое обновление добавляет новую таблицу, но, по крайней мере, теперь, если я добавлю еще какие-либо привязки к другим элементам в результатах из сетки, они будут работать так, как ожидалось.

person Pricey    schedule 21.07.2014