przy przekazywaniu zmiennej do szablonu szkieletu, jak odwoływać się do niej w szablonie?

Question

Szablon wygląda następująco.

<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> 

To jest widok JavaScript, który renderuje stronę.

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); 
} 

}); 

gdy kliknie na wejściu, requestId jest odczytywany i stan ten jest dołączony do elementu html o identyfikatorze „Wyniki rozpiętości”.

Błąd występuje podczas zamiany wartości w szablonie html na wartości zmiennych.

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

Renderowanie kończy się niepowodzeniem z następującym błędem.

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

Podkreślenie na _.template:

szablony Kompiluje JavaScript do funkcji, które można oceniać pod kątem renderowania.
[...]

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

Więc w zasadzie, to przekazać funkcję szablonu obiekt i szablon wygląda wewnątrz tego obiektu dla wartości używanych w szablonie; jeśli masz to:

<%= property %> 

w szablonie i wywołać funkcję szablonu jako t(data), to funkcja szablon będzie szukać data.property.

Zazwyczaj konwertowanie modelu widoku do JSON i strony tego obiektu do szablonu:

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

Nie wiem, co się eventName jest lub co masz zamiar z tym zrobić, ale trzeba uzyskać obiekt z tej struktury:

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

skądś i przekazać, że do funkcji szablonu:

var html = this.template(data) 

, aby uzyskać kod HTML do umieszczenia na stronie.

Demo (z fałszywą model dla celów poglądowych): 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')}); 

i tuż przed znacznika body:

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