Система шаблонов JS с Backbone.js

Question

Я смотрю на некоторые хорошие системы шаблонов, которые будут использоваться вместе с MVC-фреймворком, например Backbone.js

Я знаю одну такую ​​систему (jQuery Templating).Однако по некоторым причинам это было прекращено, и поэтому я смотрю на некоторые другие хорошие варианты.

Пожалуйста, предложите что-то достаточно гибкое с точки зрения перспективы.(например, динамическое представление с кнопкой включения / выключения на основе некоторой логики, табличные данные с различными стилями на основе некоторой логики и т. д.)

Answer 1

Мне очень нравится Handlebars.js ...

Вот немного 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();

Тогда HTML ...

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

Дайте этому шанс!

Answer 2

У вас из коробки Система шаблонов Underscore .

С примером:

# 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;
  }
});

Все системы шаблонов, которые вы можете найти, имеют подобную интеграцию.

Конечно, это упрощенный пример, обычно шаблон подается с this.model.toJSON(), также вы можете найти трюки для объявления тела шаблона в <script> tag , и вы можете использовать Усовый синтаксис вместо ERB .

Answer 3

Я использую хамл-кофе вместе с конвейером ресурсов рельсов.
Совершенно экзотический выбор, но до сих пор прекрасно работает.

Вид изнутри очень прост:

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

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