0

我有一个相当大的 ASP.NET MVC Web 应用程序，它在整个过程中都广泛使用了 KnockoutJS。多年来，我为该应用程序创建了许多模板，但它们都使用命名脚本标签驻留在各种网页中。在各种视图上管理它们几乎变得难以忍受。我想找到一种方法将这些模板合并到它们自己的 html 文件中，以便它们更易于管理。

我想知道是否有支持这个概念的库？我不想重新发明轮子，因为我确信过去已经有人遇到过这个问题并解决了它。这是我正在处理的内容的快速概述...

基本上，我有很多类似于以下标记的内容。请注意，我在与实际内容标记相同的页面中定义了模板：

[[ HOME/INDEX.CSHTML ]]

<h1>Customers</h1>
<div data-bind="template: {name: 'personTmpl', foreach: customers}"></div>

<h1>Products</h1>
<div data-bind="template: {name: 'productTmpl', foreach: products}"></div>

<script type="text/html" id="personTmpl">
  Name: <span data-bind="text: name" />
  Address: <span data-bind="text: address" />
</script>

<script type="text/html" id="productTmpl">
  Description: <span data-bind="text: description" />
  Category: <span data-bind="text: category" />
</script>

<script type="text/javascript">
  $(function(){
    var json = { 
      customers: [ { name: 'Joe', address: 'Denver, CO' } ],
      products: [ { name: 'Skis', category: 'Outdoors' } ]
    };
    var vm = new CustomViewModel(json);
    ko.applyBindings(vm);
  });
</script>

[[ END HOME/INDEX.CSHTML ]]

我想做的是将personTmpland存储productTmpl在他们自己的 html 文件中，并根据需要将它们拉到视图中。这将允许我在我的 cshtml 文件中只包含内容标记。另外，它可以让我在任何地方使用模板（即客户\索引、产品\显示、主页\索引等）。

我希望它在每个页面上都需要一些自定义 js，但我认为这是清理混乱并使我的模板可用于所有视图的小代价。我可以看到我在每个页面上使用了一些服务器端标签或类似的东西（只是一个例子）：

@section templates {
  @Content.Template("Person.tmpl", Url)
  @Content.Template("Product.tmpl", Url)
}

<h1>Customers</h1>
<div data-bind="template: {name: 'personTmpl', foreach: customers}"></div>

<h1>Products</h1>
<div data-bind="template: {name: 'productTmpl', foreach: products}"></div>

<script type="text/javascript">
  $(function(){
    var json = @Html.Raw(Json.Encode(ViewBag.PageData)));
    var vm = new CustomViewModel(json);
    ko.applyBindings(vm);
  });
</script>

通过将它们存储到自己的模板中，我什至可以使用 old fashion 动态查询内容以获取工具提示和对话框$.get('/tmpl/Person.tmpl', renderFunc)。

同样，我不介意创建自己的实现，但我确信已经有解决方案。有人吗？

提前致谢！！

4

1 回答 1

2

我的建议是在这里查看外部模板引擎：https ://github.com/ifandelse/Knockout.js-External-Template-Engine

它允许您将模板放在外部文件中，在绑定中引用它们，就像您通常使用name参数一样，并使用一些约定或配置来确定查找模板文件的确切路径。

外部模板引擎是一个非常强大的解决方案。我最近也为此目的使用require.js了它的插件。text此答案中的更多信息：knockout.js 在运行时加载模板

如果你想在线渲染它们，那么我想一个辅助函数可以加载文件并将其包装在一个非 JS 类型的脚本标签中。

于 2012-09-27T04:48:11.297 回答