0

这个主题有点令人困惑，但这是我想要做的：

我创建了一个 KnockoutJS 自定义绑定来在我的页面上显示一个网格。这很好用，我遵循了网站上的 SimpleGrid 模型。但是，我的一些字段是日期、布尔值等。我想使用自定义绑定来使用 time ago 插件等转换日期。在构建网格之前，我只需在网格中分配自定义绑定。现在我正在使用“可重用”网格绑定，我希望能够传入（作为列定义的一部分）绑定和值的列表，以便在模板中为网格的标题和单元格分配。

这是我页面中的 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");
    }
};

是否有捷径可寻？

谢谢

4

1 回答 1

0

我无法让它工作。我也向 KnockoutJS 用户组提出了问题。如果他们有回应，我会在这里发布结果。

于 2012-08-07T16:23:30.257 回答