khi chuyển một biến vào mẫu xương sống, cách tham chiếu nó trong mẫu?

Question

Mẫu trông giống như thế này.

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

Đây là Javascript chế độ xem hiển thị trang.

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

}); 

Khi nhấp chuột vào đầu vào, yêu cầuId được đọc và trạng thái được nối vào phần tử html có id 'khoảng kết quả'.

Lỗi xảy ra khi thay thế các giá trị trong mẫu html với các giá trị biến.

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

Hiển thị không thành công với lỗi sau.

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

gạch của _.template:

biên dịch Javascript mẫu vào chức năng mà có thể được đánh giá để render.
[...]

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

Vì vậy, về cơ bản, bạn có tay mẫu chức năng một đối tượng và các mẫu trông bên trong đó đối tượng cho các giá trị mà bạn sử dụng trong mẫu của bạn; nếu bạn có điều này:

<%= property %> 

trong mẫu của bạn và bạn gọi mẫu chức năng như t(data), sau đó mẫu chức năng sẽ tìm kiếm data.property.

Thông thường bạn chuyển đổi mô hình của nhằm JSON và bàn tay mà đối tượng trong từng mẫu:

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

Tôi không biết những gì bạn eventName là hoặc những gì bạn đang có ý định làm gì với nó nhưng bạn cần phải có được một đối tượng với cấu trúc này:

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

từ đâu đó và tay đó đến mẫu chức năng:

var html = this.template(data) 

để nhận một số HTML để đặt trên trang.

Demo (với một mô hình giả cho mục đích minh họa): 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')}); 

và ngay trước thẻ cơ thể:

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