设置自定义绑定在一个模板，如绑定

主题是有点混乱，但在这里自定义的一部分，是我想要做的事：设置自定义绑定在一个模板，如绑定

我创建了一个自定义的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"); 
    } 
};

是否有简单的方法来做到这一点？

谢谢

来源

2012-06-27 Brent Pabst

你可以发布一个jsfiddle，以便我们可以看到完整的上下文，包括你自定义绑定？这肯定有助于澄清你的问题 – daedalus28

我无法将整个事情发布到JSFiddle，部分原因是因为我无法从开发系统复制AJAX调用。由于法律原因，我无法再发布任何代码。 –

@BrentPabst jsfiddle有一个echo API来帮助你模拟ajax调用，并且你可以抽象你的代码，使它不符合任何你不能合法发布的代码。如果你在问题上寻求帮助，你应该准备好详细说明。 – Tyrsius

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

来源

2012-08-07 16:23:30

设置自定义绑定在一个模板，如绑定

回答

相关问题