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

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 つ目: はい。ただし、バージョン 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 でロジックを実行します。おそらく、配列に対して 1 回だけです。

  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 に答える