2011-07-30 13 views
7

翡翠/アンダースコアのバックボーンを使用したテンプレートについて、少し混乱しています。Backbone.jsモデルの翡翠とループ

私はいくつかの配列を持つバックボーンモデルを持っており、配列属性のレンダリング方法がわかりません。私は別のバックボーンコレクション&のビューにそれらを移動することができますが、この場合は過剰なように見えます。私はモデルをレンダリングすることができます私のバックボーンファイルへ

私はthis blog post on using backbone with jadeに続いて、以下を追加

_.templateSettings = { 
     interpolate : /\{\{(.+?)\}\}/g 
    }; 

はこの邸宅の属性:

 //in my JavaScript 
     this.template = _.template($("#some-template").html()); 

     //in my .jade template 
     input.text(type='text', name="name", value='{{name}}') 

私は仕事をしたいものをどのようにありますモデル内の配列の1つに対して単純なループを実行します。例えば

- for (var child in children) 
     {{child}} 

が、イムヒスイが開始され、アンダースコア等を引き継ぎ正しい構文、程度はかなり混乱していただきありがとうございます。

答えて

5

ブラウザでjadeを使用することはできません(おそらく技術的に可能ですが、アンダースコアではなくバックボーンで使用するのが一般的ではありません)。そこでアンダースコアテンプレートを使用します。 The docs on _.templateは、javascriptを評価し、_.eachメソッドを使用してモデルの配列属性をループすることを示しています。

ビューのrender機能の中で、このようになります。効率のためにビューの属性としてテンプレート関数をキャッシュしたいと思うでしょうが、ここでは簡単にするためにインライン展開しています。たとえば、driversのリストをドライバ名の配列として持つCarモデルがあるとします。

var template = "<% _.each(model.drivers, function(name) { %> <li><%= name %></li> <% }); %>"; 
return _.template(template, this); 

あなたはこの例では、テンプレートマークアップの補間スタイル(<%=)と評価したスタイル(<%)の両方を含んでいるとして、あなたのテンプレート設定でevaluate構文を提供する必要があります注意してください。現在、あなたはちょうど口髭様式の補間をしており、それは十分ではありません。