보기 위해 모델 속성을 바인딩하는 템플릿 엔진?

Question

백본을 통해 템플릿을 렌더링 당신은 종종 다음과 같은 형태 몇 가지 코드로 끝날 것보기 :

ShirtView = { 
    template: JST["/templates/shirt_template"], 
    el: ".shirt-element" 

    render: function() { 
    var html = this.template({color: this.model.color, size: this.model.size}); 
    this.$el.html(html); 
    } 
} 

이 잘 좋은 모든과 템플릿은 당신이 원하는 속성을 렌더링합니다. 그러나 this.model.color이 변경되면보기에 반영되지 않습니다. 그런 다음 modelbinder와 같은 것을 사용하여 뷰의 요소를 모델에 명시 적으로 바인딩 할 수 있지만 이는 뷰에 코드를 추가하는 것을 의미합니다.

Mustache 또는 Handlebars와 같은 템플릿 엔진이 있으면 모델 개체가 변경 될 때마다 특성 개체의 필드에 속한 요소를 자동으로 업데이트하는 것이 궁금합니다. 뷰에서 지정하지 않아도됩니까?

Answer 1

의견에서 제안했듯이이를 위해 사용할 수있는 여러 라이브러리가 있지만 ... 필요하지 않다고 제안하고 싶습니다. 수천 (아마 수십 또는 수십만)의 코드 줄을 사용하는 백본 기반 사이트에서 작업하며 우리가 사용하는 것은 모두 사용자 지정 기본 클래스입니다. 본질적으로

, 당신이 할 필요가있다 : 일부 사용자 정의 논리를 렌더링이있는 경우,

var ShirtView = TemplatedView.extend({ 
    template: JST["/templates/shirt_template"], 
    el: ".shirt-element" 
}); 

나 :

var TemplatedView = Backbone.View.extend({ 
    render: function() { 
     this.renderTemplate(); 
    }. 
    renderTemplate: function() { 
     this.$el.html(this.template(this.model.toJSON())); 
    } 
}); 

은 다음 새로운보기 단지와 템플릿 하나를 만들 수 있습니다 , 당신은 단지 renderTemplate를 호출해야합니다.

var AdvancedShirtView = TemplatedView.extend({ 
    template: JST["/templates/shirt_template"], 
    el: ".shirt-element", 

    render: function() { 
     this.model.fold(); 
     this.renderTemplate(); 
     this.model.press(); 
    } 
}); 

이제 우리는 그 이상 몇 가지 개선 사항을 (이

등의 경우 omeone은 우리 뷰 중 하나에서 "rawTemplate"속성을 지정하고, renderTemplate은 적절한 템플릿으로 컴파일 할 것입니다. 그러나 이것은 여러분이 원하는 것을 정확하게 얻을 수있는 자신 만의 솔루션입니다.

또는 라이브러리를 사용할 수 있습니다. 개인적으로 사이트에 너무 단순하면서도 필수적인 항목 인 경우 사용자가 원하는 이유를 개인적으로 알지 못합니다.