7

我正在寻找一些可以与 MVC 框架（如 Backbone.js）一起使用的优秀模板系统

我知道一个这样的系统（jQuery 模板）。然而，由于某些原因，同样的已经停产，因此我正在寻找其他一些好的选择。

请从视图的角度提出足够灵活的建议。（例如，基于某些逻辑启用/禁用按钮的动态视图，基于某些逻辑具有不同样式的表格数据等）

4

3 回答 3

7

我真的很喜欢 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>

试一试！

于 2012-03-19T14:56:13.377 回答
6

您拥有开箱即用的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。

于 2012-03-19T13:28:43.797 回答
0

我将haml-coffee与rails 资产管道一起使用。
相当异国情调的选择，但到目前为止效果很好。

内部视图很简单：

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

  render: function(){
    var html = this.template(this.model.toJSON());
    this.$el.html(html);
  }
})
于 2012-03-20T17:36:42.943 回答