조건부 논리는 기본 knockout.js 2.0 템플릿 엔진에서 작동합니까?

Question

아래의 조건은 knockout.js 2.0을 기본 템플릿으로 사용하지 않습니다. IF 문을 그냥 씁니다.

<span data-bind="foreach: admin.home.paging.pages"> 
     {{if $data == app.viewModel.admin.home.paging.page()}} 
     <span data-bind="html: $data"></span> 
     {{else}} 
     <a href="#" data-bind="click: app.viewModel.admin.home.paging.searchByPage($data), html: $data"></a> 
     {{/if}} 

    </span> 

UPDATE 나는 다음 대신했다.

<span data-bind="foreach: admin.home.paging.pages"> 
     <span data-bind="html: $root.admin.home.paging.page(), visible: $data == $root.admin.home.paging.page()"></span> 
     <a href="#" data-bind="click: function() { $root.admin.home.searchByPage($data); }, html: $data, visible: $data != $root.admin.home.paging.page()"></a> 
    </span> 

Answer 1

코드는 JQuery와 tmpl을 사용하고 있지만 기본적으로 넉 아웃은 기본 템플릿 엔진을 사용합니다. jquery tmpl을 원한다면 네이티브 엔진을 재정의해야합니다. 네이티브 엔진을 사용하면 기본 템플릿 바인딩 경우 사용할 수 있습니다 원하는 경우 :

<span data-bind="foreach: admin.home.paging.pages"> 
     <!-- ko if: $data === app.viewModel.admin.home.paging.page() --> 
      <span data-bind="html: $data"></span> 
     <!-- /ko --> 
     <!-- ko if: $data !== app.viewModel.admin.home.paging.page() --> 
      <a href="#" data-bind="click: app.viewModel.admin.home.paging.searchByPage($data), html: $data"></a> 
     <!-- /ko --> 
</span> 

그러나, 나도 몇 가지 변경을 권장합니다. 나는 당신의 HTML에서 논리를 추상화하고 viewmodel에서 함수를 작성하여 평가를 수행하고 true/false를 리턴합니다. 예를 들어,

<!-- ko if: isSamePage() --> 

나는 가능한 한 객체 계층 구조를 약간 줄입니다. 또한 with 블록 사용을 고려하십시오.

admin.home.paging.pages를 통해 반복하는 경우 해당 루프 내부의 각 객체는 해당 객체 계층의 하위 객체입니다. 즉, 전체 객체 체인을 계속 지정하지 않아도됩니다.