넉 아웃 기본 템플릿

Question

넉 아웃 기반 페이지를 기본 템플릿으로 변환 할 계획입니다. 그러나 jQuery 템플릿과 비교하여 기본 템플릿의 한계에 대해 몇 가지 질문이 있습니다.

넉 아웃 기본 템플릿을 사용하면 'if'컨트롤 내에서 함수를 참조 할 수 있습니까?

jQuery를 템플릿 :

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

Answer 1

먼저 하나

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

기본 템플릿 내가이 사용하는 기본 템플릿처럼 인덱서에 액세스 할 수 있습니다, 또한

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

(이 가능하다) 예, 가능합니다. 많은 코드를 변경할 필요가 없습니다. 그러나, 어쨌든 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에 대한 자세한 내용을 볼 수 있습니다.

첫 번째 요점과 마찬가지로, 많은 논리를 템플릿에 제공하지 않도록 자바 스크립트 코드를 변경해야 할 수도 있습니다.

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

하는 주형 기본 KnockoutJS에서

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

더 나은 방법은

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

될 수 있으며, 당신은 당신의 배열에 대해 어쩌면 그냥 한 번, 당신의 js에서 로직을한다.

jQuery를 템플릿에 대한

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)