淘汰型本机模板

Question

我计划将基于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}}

Answer 1

第一个:是的，这是可能的，而且很可能你不需要修改太多的代码。但是，为了适应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);
});

(这是一个快速示例，您可以通过动态模板以更具伸缩性的方式设计代码)

第二个:是的，但只能通过$index关键字从2.1版开始。您可以阅读有关讨论here和一些文档here的更多信息。

与第一点一样，您可能希望更改一些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)