Question

I’m planning to convert a Knockout based page to native templating. However, I have a couple of questions about the limitations of native templating compared to jQuery Templates.

With Knockout native templating can I reference a function within an ‘if’ control?

jQuery Templates:

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

Native Templates (is this possible)

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

Also, can I access an indexer like this using native templating:

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

Answer 1

First one: Yes, it’s possible, and most likely you won’t need to change much code. However, you might want to do anyway in order to suit a better architecture in KnockoutJS. It’s not only for KO, but also a better design pattern that’s more maintainable.

For instance, this

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

has the same functionality than

<!-- ko if: currentWordisPremier -->

and in your code you have something like

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

(This was a quick example, you can design your code in a more scalable way through dynamic templating)

Second one: Yes, but only from version 2.1 through the $index keyword. You can read more about the discussion here and some documentation here.

As with the first point, you might want to change some of your javascript code to not give the template that much logic.

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

in native KnockoutJS templating

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

a better approach could be

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

and you do the logic in your js, maybe just once for your array.

  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)