0

我打算将基于 Knockout 的页面转换为原生模板。但是，与 jQuery 模板相比，我有几个关于本机模板的局限性的问题。

使用 Knockout 本机模板，我可以在“if”控件中引用函数吗？

jQuery 模板：

 {{if GetFirstWord(ProductName) == "Premier"}}

原生模板（这可能吗）

<!-- ko if: GetFirstWord(ProductName) == "Premier" -->

另外，我可以使用本机模板访问这样的索引器吗：

{{each(i, d) Benefits}}
  <div class="{{if i%2==0}}even{{else}}odd{{/if}}">
{{/each}}
4

1 回答 1

3

第一个：是的，这是可能的，而且很可能您不需要更改太多代码。但是，为了适应 KnockoutJS 中更好的架构，您可能还是想这样做。它不仅适用于 KO，而且是一种更易于维护的更好的设计模式。

例如，这个

<!-- ko if: GetFirstWord(ProductName) == "Premier" -->

具有相同的功能

<!-- ko if: currentWordisPremier -->

在你的代码中你有类似的东西

self.currentWord = ko.observable("");
self.currentWordisPremier = ko.observable(false);
self.currentWord.subscribe(function(newCurrentWord){
  if(newCurrentWord === "Premier") self.currentWordisPremier(true);
});

（这是一个简单的示例，您可以通过动态模板以更具可扩展性的方式设计您的代码）

第二个：是的，但仅从 2.1 版开始通过$index关键字。您可以在此处阅读有关讨论的更多信息，并在此处阅读一些文档。

与第一点一样，您可能希望更改一些 javascript 代码以不为模板提供太多逻辑。

{{each(i, d) Benefits}}
  <div class="{{if i%2==0}}even{{else}}odd{{/if}}">
{{/each}}

在原生 KnockoutJS 模板中

<!-- ko foreach:Benefits -->
  <!-- ko if: $index %2 == 0 -->
  <div class="even"> ... </div>
  <!-- /ko -->
  <!-- ko ifnot: $index % 2 == 0 -->
  <div class="odd"> ... </div>
  <!-- /ko -->
<!-- /ko -->

更好的方法可能是

<!-- ko foreach:Benefits -->
  <div data-binding="css: {"even" isEven, "odd": isOdd}"> ... </div>
<!-- /ko -->

你在你的 js 中执行逻辑，可能只为你的数组执行一次。

  var index = 0;
  var updatedBenefits = ko.utils.arrayForEach(self.Benefits(), function(benefit) {
     var property = index++ %2 == 0 ? "isEven" : "isOdd";
     return benefit[property] = true;
  });
  self.Benefits(updatedBenefits)
于 2013-01-07T21:49:45.867 回答