Настройка пользовательских привязок в шаблоне как часть пользовательской привязки

Question

Тема немного запутанная, но вот что я пытаюсь сделать:

Я создал пользовательскую привязку KnockoutJS для отображения сетки на моей странице. Это хорошо работает, я следовал модели SimpleGrid на сайте. Однако некоторые из моих полей - это даты, логические значения и т. Д. Я хотел бы использовать настраиваемую привязку для преобразования даты с помощью плагина времени назад и т. Д. Перед построением сетки я просто назначил бы настраиваемую привязку в сетке. Теперь, когда я использую "повторно используемую" привязку сетки, я хочу иметь возможность передавать (как часть моих определений столбцов) список привязок и значений, которые нужно назначить в шаблоне для заголовка и ячеек моей сетки.

Вот HTML-код на моей странице:

<div data-bind="grid: grid" />

Вот модель просмотра HTML-страницы:

 var tenantsViewModel = {
    navigateDetails: function (tenant) {
        document.location = '/Tenants/Details/' + tenant.TenantId;
    },
    navigateDomain: function (tenant) {
        window.open("http://" + tenant.Domain);
    },
    grid: new my.grid({
        resource: "system/tenants",
        columns: [
          { display: "Tenant", value: "Name", isLink: true },
          { display: "Enabled", value: "IsEnabled", isLink: false },
          { display: "Tenant Since", value: "CreatedOn", isLink: false },
          { display: "Domain", value: "Domain", isLink: true }
      ]
    })
};
tenantsViewModel.grid.update();
ko.applyBindings(tenantsViewModel);

Вот моя пользовательская привязка сетки и шаблон:

// Object
my.grid = function (config) {
    var self = this;
    self.data = ko.observableArray([]);
    self.columns = config.columns;
    var resource = config.resource;

    my.grid.prototype.update = function () {
        // A Wrapper for $.ajax()/JSONP
        my.get(resource, function (data) {
            self.data(data);
        });
    };
};

// Templates
var templateEngine = new ko.nativeTemplateEngine();

templateEngine.addTemplate = function (templateName, templateMarkup) {
    document.write("<script type=\"text/html\" id='" + templateName + "'>" + templateMarkup + "<" + "/script>");
};

templateEngine.addTemplate("merlin_grid", "\
                <table class=\"data\">\
                    <thead>\
                        <tr data-bind=\"foreach: columns\">\
                           <th data-bind=\"text: display\"></th>\
                        </tr>\
                    </thead>\
                    <tbody data-bind=\"foreach: data\">\
                       <tr data-bind=\"foreach: $parent.columns\">\
                           <td data-bind=\"css: { link: isLink },text: typeof value == 'function' ? value($parent) : $parent[value] \"></td>\
                        </tr>\
                    </tbody>\
                </table>");

// Grid: Convert element into a full blown grid component
ko.bindingHandlers.grid = {
    init: function () {
        return { controlsDescendantBindings: true };
    },
    update: function (element, viewModelAccessor, allBindingsAccessor) {
        var viewModel = viewModelAccessor(), allBindings = allBindingsAccessor();

        while (element.firstChild)
            ko.removeNode(element.firstChild);

        var gridTemplateName = allBindings.gridTemplate || "merlin_grid";

        var gridContainer = element.appendChild(document.createElement("DIV"));
        ko.renderTemplate(gridTemplateName, viewModel, { templateEngine: templateEngine }, gridContainer, "replaceNode");
    }
};

Есть простой способ сделать это?

Спасибо

Answer 1

Я не смог заставить это работать. У меня также есть вопрос к группе пользователей KnockoutJS. Если они когда-нибудь ответят, я опубликую результат здесь.