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);
});

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

第二个：是的，但仅限于版本2.1到$index关键字。您可以详细了解讨论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)

淘汰本机模板

1 个答案: