変数をバックボーンテンプレートに渡すとき、そのテンプレートでどのように参照するのですか？

Question

テンプレートは次のようになります。

<div> 
    <H5>Status for your request</H5> 
    <table> 
    <tbody> 
    <tr> 
     <th>RequestId</th> 
     <th><%=id%></th> 
    </tr> 
    <tr> 
     <th>Email</th> 
     <th><%=emailId%></th> 
    </tr>  
    <tr> 
     <th>Status</th> 
     <th><%=status%></th> 
    </tr>  
    </tbody> 
    </table> 
</div> 

これは、ページをレンダリングするビューのJavascriptです。

window.StatusView = Backbone.View.extend({ 

initialize:function() { 
    console.log('Initializing Status View'); 
    this.template = _.template(tpl.get('status')); 
}, 

render:function (eventName) { 

    $(this.el).html(this.template()); 
    return this; 
}, 

events: { "click button#status-form-submit" : "getStatus" }, 

getStatus:function(){ 

    var requestId = $('input[name=requestId]').val(); 
    requestId= $.trim(requestId); 

    var request = requests.get(requestId); 

    var statusTemplate = _.template(tpl.get('status-display')); 
    var statusHtml = statusTemplate(request); 
    $('#results-span').html(statusHtml); 
} 

}); 

入力のクリックは、requestIdが読み取られ、ステータスがID「結果スパン」を有するHTML要素に付加されます。

エラーは、html-templateの値を変数値に置き換えたときに発生します。

var statusTemplate = _.template(tpl.get('status-display')); 
var statusHtml = statusTemplate(request); 

レンダリングが失敗し、次のエラーが発生します。

Uncaught ReferenceError: emailId is not defined 
(anonymous function) 
_.templateunderscore-1.3.1.js:931 
window.StatusView.Backbone.View.extend.getStatusstatus.js:34 
jQuery.event.dispatchjquery.js:3242 
jQuery.event.add.elemData.handle.eventHandle 

Answer 1

アンダーの_.template：

は、レンダリングのために評価することが可能な機能にはJavaScriptテンプレートをコンパイルします。
[...]

var compiled = _.template("hello: <%= name %>"); 
compiled({name : 'moe'}); 
=> "hello: moe" 

そこで、基本的には、オブジェクトとテンプレートは、あなたのテンプレートで使用する値のために、そのオブジェクトの内側に見えるテンプレート関数を手渡します。あなたは、この持っている場合：あなたのテンプレートで

<%= property %> 

を、あなたがt(data)としてテンプレート関数を呼び出し、その後、テンプレート関数はdata.propertyを探します。

通常あなたがJSONにビューのモデルを変換し、テンプレートに反対の手：私はあなたのeventNameが何であるか、あなたがそれを行うことを計画しているのか分からないが、あなたがする必要がある

render: function (eventName) { 
    $(this.el).html(this.template(this.model.toJSON())); 
    return this; 
} 

どこからか

data = { id: '...', emailId: '...', status: '...' } 

とテンプレート関数にそれを手：このような構造を持つオブジェクトを取得

var html = this.template(data) 

を入力して、ページに入れるHTMLを取得します。 （例示的な目的のために偽のモデルと）

デモ：http://jsfiddle.net/ambiguous/hpSpf/

Answer 2

OptionalExtrasView = Backbone.View.extend({ 
    initialize: function() { 
     this.render(); 
    }, 
    render: function() { 
     // Get the product id 
     //var productid = $(this).attr("productid"); 
     var data = {name : 'moe'}; 

     var tmpl = _.template($('#pddorder_optionalextras').html()); 
     this.$el.html(tmpl(data)); 
    } 
}); 

    var search_view = new OptionalExtrasView({ el :  $('.pddorder_optionalextras_div')}); 

だけbodyタグの前に：

 <script type="text/template" id="pddorder_optionalextras"> 
    <%= name %> 
    </script>