7

Backbone.js のような MVC フレームワークと一緒に使用できる優れたテンプレート システムを検討しています。

私はそのようなシステムの 1 つ (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()に宣言するためのトリックを見つけることができ、ERBの代わりにMustache構文を使用できます。<script>

于 2012-03-19T13:28:43.797 に答える
0

Railsアセットパイプラインと一緒にhaml-coffeeを使用しています。
非常にエキゾチックな選択ですが、これまでのところうまく機能します。

内部ビューは次のように簡単です。

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 に答える