2012-12-10 3 views
0

목록 테이블 템플릿에 콤보 상자를 추가하고 내 모델의 데이터베이스에 따라 콤보 상자를 렌더링하려는 경우 무엇이 잘못 되었습니까? 도와주세요 ..Handlebar.js 문이 작동하지 않는 경우

<script type="text/x-handlebars-template" id="listItemTmpl"> 
<tr>        
    <td>{{partNo}}</td> 
    <td> 
     <select name="selectCombo" id="selectCombo"> 
       {{#each chks}} 
       <option value='{{myModel.id}}' {{#if(this.id==myModel1.status)}}selected{{/if}}>{{myModel1.name}}</option> 
       {{/each}} 
      </select> 
    </td> 
</tr> 

</script> 

ı 두 모델이 있습니다. 하나는

이고;

myModel=Backbone.Model.extend({ 
    url:url, 
    defaults:{ 

    } 
}); 

답변

4

문제는 핸들 바가 작동하는 방식이 아니라는 것입니다. {{#if(this.id==myModel1.status)}}이라는 표현식은 유효한 핸들 바 if-block이 아닙니다.

핸들 모음은 의미 론적 템플릿 엔진입니다. 임의의 자바 스크립트 표현식을 지원하지 않습니다. #if 블록으로 확인할 수있는 유일한 것은 진실인지 여부 (false, undefined, null, "" 또는 []이 아님)입니다.

템플릿을 렌더링하기 전에 조건을 평가하고 결과를 viewmodel을 사용하여 템플릿에 전달하는 것이 가장 좋습니다. 귀하의 경우에는, 당신은 chks 배열의 각 개체에 isSelected 속성을 추가 할 수 있고, 단순히 핸들을 사용하는 방법에 대한 예제들은 handlebars.js documentation를 참조

{{#if isSelected}}selected{{/if}} 

와 템플릿에 그것을 평가한다.

1

일반적으로 isSelected 플래그와 fencliff's answer을 사용해야합니다. 그러나 추가 플래그를 추가하는 것이 적절한 옵션이 아니므로 {{#ifeq}} 도우미를 추가 할 수 있습니다. 이 같은 간단한 뭔가 : 템플릿에

Handlebars.registerHelper('ifeq', function(a, b, block) { 
    return a == b ? block() : block.inverse(); 
}); 

다음 :

<option value='{{myModel.id}}' {{#ifeq id myModel1.status}}selected{{/ifeq}}>{{myModel1.name}}</option> 

데모 : http://jsfiddle.net/ambiguous/rsyv9/

+0

나는 이것을 제안하는 것에 대해서 생각했지만 핸드 헬드의 선언적이고 논리적 인 곡식에 맞지 않는다고 느꼈다. 그 종류의 일에 있다면, 논리를 정의하는 능력을 제공하는 템플릿 프레임 워크가 많이 있습니다. 언더 스코어에 구운 것이 있습니다 .js는 OP가 이미 사용하고 있습니다. – jevakallio

+0

@fencliff : 항상 * 의존합니다 *. 그리고 두 개의 템플릿 엔진을 혼합하는 것은 지저분합니다. –

+0

@muistooshort 그 작업, 고마워요 :) –

1

그냥 업데이 트. 최신 버전의 Handlebars는 block() 대신 block.fn()을 사용했습니다. 그렇지 않으면 에러를 던질 수있다.

Handlebars.registerHelper('ifeq', function(a, b, block) { 
    return a == b ? block.fn() : block.inverse(); 
}); 
관련 문제