web-dev-qa-db-ja.com

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

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

<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「results-span」の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
javascriptjquerytemplatesbackbone.jsunderscore.js
15
Nambi

アンダースコア __.template_ ：

JavaScriptテンプレートを、レンダリングのために評価できる関数にコンパイルします。
[...]

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

したがって、基本的には、テンプレート関数にオブジェクトを渡し、テンプレートはそのオブジェクトの内部で、テンプレートで使用する値を探します。これがあれば：

_<%= property %>
_

テンプレートで、テンプレート関数をt(data)として呼び出すと、テンプレート関数は_data.property_を探します。

通常、ビューのモデルをJSONに変換し、そのオブジェクトをテンプレートに渡します。

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

私はあなたのeventNameが何であるか、またはあなたがそれで何をするつもりかを知りませんが、この構造を持つオブジェクトを取得する必要があります：

_data = { id: '...', emailId: '...', status: '...' }
_

どこかからそれをテンプレート関数に渡します：

_var html = this.template(data)
_

ページに配置するHTMLを取得します。

デモ（説明のために偽のモデルを使用）： http://jsfiddle.net/ambiguous/hpSpf/

22
mu is too short
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>
3
kta