2012-05-10 5 views
0

私が作業しているプロジェクトでbackbone.jsを使用し始めたところです。ダイナミックテンプレートまたはxhrテンプレート

私は現在、モデル、コレクション、ビューまですべての設定をしています。私はサーバー上のRESTアプリケーションからデータを取得しています。

クライアントはアプリにログインできます。現在私はunderscore.jsテンプレートにその情報を入力していますが、テンプレートを動的にしたいのです。いくつかのオプションはクライアントによって異なるでしょう。

テンプレートを使って動的情報を取得するための特定のajax呼び出しを行うと、backbone.jsを完全に使用する目的が無効になります。バックボーンとアンダースコアにxhrリクエストからテンプレートをロードすることは可能ですか?それとももっと良い方法がありますか?

ご協力ありがとうございます。

答えて

2

テンプレートは、アンダースコアが関係する限り文字列であり、その文字列をどこからでも取得できます。これを行うことができます:

render: function() { 
    var that = this; 
    $.get('/some_template', function(tmpl) { 
     that.$el.html(_.template(tmpl, that.model.toJSON())); 
    }); 
    return this; 
} 

実際には、サーバーから特定のテンプレートを1回だけ取り出す単純なキャッシングオブジェクトの背後に隠すことをお勧めします。

または、あなたが必要とされているテンプレートのセットと<script>要素でそれらを埋め込むサーバーコードの数字出すことができます:

<script id="tmpl1" type="text/template"> 
    Some template code... 
</script> 
<script id="tmpl2" type="text/template"> 
    Some template code... 
</script> 
... 

<script>秒のうち、テンプレートを引く:

render: function() { 
    var tmpl = _.template($('#tmpl1').html()); 
    this.$el.html(tmpl(this.model.toJSON())); 
    return this; 
} 

また、コンパイルされたテンプレートtmplをどこかにキャッシュすることもできますし、ビュークラスを定義してコンパイルすることもできます(DOMの準備が整っていることを前提とします)。

var V = Backbone.View.extend({ 
    template: _.template($('#tmpl1').html()), 
    //... 
    render: function() { 
     this.$el.html(this.template(this.model.toJSON())); 
     return this; 
    } 
}); 
関連する問題