2012-05-01 3 views
13

Шаблон выглядит следующим образом.при передаче переменной в базовый шаблон, как ссылаться на него в шаблоне?

<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 считывается и статус добавляется в HTML-элемент с идентификатором «результаты пролета».

Ошибка при замене значений в html-шаблоне значениями переменных.

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 

ответ

21

Подчеркивание-х _.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-код для размещения на странице.

Demo (с поддельной моделью для иллюстративных целей): http://jsfiddle.net/ambiguous/hpSpf/

+1

Спасибо за указатели. Вместо передачи модели Backbone я передал чистый объект javascript, созданный из модели. 'var data = {id: request.get ('id'), emailId: request.get ('emailId'), status: request.get ('status')};'. Теперь шаблон отлично его рендерит. В чем разница между моделью BackBone и чистым объектом JS? – Nambi

+0

@Nambi: Обычно просмотры моделей или коллекций в Backbone и эта модель или коллекция находятся в ['this.model' или' this.collection'] (http://documentcloud.github.com/backbone/#View-constructor) ,Затем вы переводите модель/коллекцию в обычную структуру данных JavaScript, используя метод ['toJSON'] (http://documentcloud.github.com/backbone/#Model-toJSON). Если 'request' является моделью Backbone, то ваш' var data = {...} 'такой же, как' var data = request.toJSON() ', за исключением того, что' toJSON' будет включать все атрибуты 'request'. Шаблон позаботится, он просто хочет объект с правильными клавишами. –

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

и непосредственно перед тегом тела:

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

Я получаю это с помощью Node.js, Сообщение об ошибке ----> имя не определено –

+0

Я думаю, что это потому, что я должен использовать шаблоны EJS, не подчеркивающие шаблоны –