带有Backbone.js的JS模板系统

Question

我正在寻找一些好的模板系统,以及像Backbone.js这样的MVC框架

我知道一个这样的系统(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>声明为标签的技巧,你可以使用Mustache语法而不是ERB.