Mustache의 해시 값을 기반으로 템플릿 부분을 전환 할 수 있습니까?

Question

좋아, 그래서 자바 스크립트에서 뷰를 렌더링 Mustache.js 그립을 얻으려고하고있어. 여러 가지 "이벤트"를 반환하는 API가 있습니다.이 API는 다양한 유형이 될 수 있습니다. 나는 이런 식으로 뭔가 할 수있는 이상적

data : { 
    events: [ {title: 'hello', type: 'message'}, {title: 'world', type: 'image'} ] } 

: 나는 그들의 유형에 따라 (매우) 다른 방법으로,의 이벤트 렌더링 할

{{#events}} 
    {{#message}} 
     <div class="message">{{title}}</div> 
    {{/message}} 
    {{#image}} 
     <span>{{title}}</span> 
    {{/image}} 
{{/events}} 

을하지만 (오른쪽?) 저를 강제 내 데이터를 리팩토링하려면

data : { 
    events: [ {message: {title: 'hello'}}, {image: {title: 'world'}} ] } 

내 데이터를 리팩터링하지 않고 더 좋은 방법이 있습니까? 아니면 그냥 총알을 물어야합니까?

Answer 1

콧수염이 논리가 없으므로 Handlebars으로 전환하는 것 이외의 순수한 템플릿 코드로는 할 수있는 것이 많지 않습니다.

귀하가 선호하는 대안은 도우미를 선언하고 그것을 사용하여 렌더링 할 템플릿을 선택하는 것입니다. 그것은 조금 복잡한 얻을 수 있지만, 당신은 변경할 수없는 무언가가 있다면 당신은 콧수염 떨어져 전환 방지 할 수 있습니다

var base_template = '{{#events}}' + 
         '{{{event_renderer}}}' + 
        '{{/events}}'; 
var message_template = '<div>message: {{title}}</div>'; 
var image_template = '<div>image: {{title}}</div>'; 
var data = { 
    events: [ {title: 'hello', type: 'message'}, {title: 'world', type: 'image'} ], 
    event_renderer: function() { 
     return Mustache.render('{{> ' + this.type + '}}', this, {message: message_template, image: image_template}); 
    } 
} 

Mustache.render(base_template, data); 

여기에서의 트릭 당신이 반복자 될 것입니다 기본 템플릿을 생성하고, 같은 event_renderer 전달한다는 것입니다 도우미. 그 도우미는 다시 Mustache.render를 호출하여 partial을 사용하여 가질 수있는 각 유형의 이벤트를 렌더링합니다 (이는 {{> 부분}} 표기입니다).

여기서 유일한 추악한 부분은이 event_renderer 멤버를 JSON 데이터에 추가해야한다는 것입니다.하지만이 외에도 모두 괜찮을 것입니다 (핸들러에서이를 도우미로 선언 할 수 있으므로 병합 할 필요가 없습니다). 귀하의 데이터와 함께).