hệ thống khuôn mẫu JS với Backbone.js

Question

tôi đang xem xét một số hệ thống khuôn mẫu tốt để được sử dụng alongwith một khung MVC như Backbone.js

Tôi biết của một hệ thống như vậy (jQuery Templating). Tuy nhiên, tương tự đã bị ngưng vì một số lý do và do đó tôi đang xem xét một số lựa chọn tốt khác.

Vui lòng đề xuất nội dung nào đó đủ linh hoạt từ phối cảnh. (ví dụ: chế độ xem động với nút bật/tắt dựa trên một số logic, dữ liệu dạng bảng với các kiểu khác nhau dựa trên một số logic, v.v.)

Answer 1

Bạn đã ra khỏi hộp Underscore's template system.

Với ví dụ:

# code simplified and not tested 
var myView = Backbone.View.extend({ 
    template: _.template("<h1><%= title %></h1>"), 

    render: function(){ 
    this.$el.html(this.template({ title : "The Title" })); 
    return this; 
    } 
}); 

Tất cả các hệ thống mẫu mà bạn có thể tìm thấy có một tích hợp tương tự như sau.

Tất nhiên đây là một ví dụ đơn giản , thường là mẫu được nuôi dưỡng bằng những this.model.toJSON(), bạn cũng có thể tìm thấy thủ thuật để khai báo template body into an <script> tag, và bạn có thể sử dụng Mustache syntax instead of ERB.

Answer 2

Tôi thực sự thích Handlebars.js ...

Dưới đây là một số hoạt Javascript ...

var HandlebarsView = Backbone.View.extend({ 
    el: '#result' 
    initialize: function(){ 
     this.template = Handlebars.compile($('#template').html()); 
    }, 
    render: function(){ 
     var html = this.template(this.model.toJSON()); 
     this.$el.html(html); 
    } 
}); 

var HandlebarsModel = Backbone.Model.extend({}); 

var model = new HandlebarsModel({ 
    name: 'Joe Schmo', 
    birthday: '1-1-1970', 
    favoriteColor: 'blue' 
}); 

var view = new HandlebarsView({ 
    model: model 
}); 
view.render(); 

Sau đó, html ...

<div id="result"> 
</div> 
<script id="template" type="text/html"> 
    <div>Name:{{name}} Birthday: {{birthday}} Favorite Color: {{favoriteColor}} </div> 
</script> 

Cho rằng một shot!

Answer 3

Tôi đang sử dụng haml-coffee cùng với đường ống nội dung đường ray.
Khá sự lựa chọn kỳ lạ, nhưng hoạt động tốt cho đến nay.

Bên trong xem nó đơn giản như vậy:

var MyView = Backbone.View.extend({ 
    template: JST['path/to/mytemplate'] 

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