myModel.fetch（）完成時渲染主幹模板？

使用backbone.js我試圖從我的服務器獲取模型，並基於該模型呈現下劃線模板。我首先嚐試使用以下渲染函數而不使用api調用的結果：myModel.fetch（）完成時渲染主幹模板？

render: function(options) { 
    this.ticketId = options.ticketId; 
    var that = this; 
    var ticketModel = new TicketModel({'id': that.ticketId}); 
    $.when(ticketModel.fetch()).done(function(){ 
     console.log(ticketModel); // this outputs the correct model 
    }); 
    var template = _.template($('#tab-content-template').html(), {ticketId: that.ticketId}); 
    this.$el.html(template); 
},

這很好用。所以，我嘗試使用API調用的結果來呈現模板：

render: function(options) { 
    this.ticketId = options.ticketId; 
    var that = this; 
    var ticketModel = new TicketModel({'id': this.ticketId}); 
    $.when(ticketModel.fetch()).done(function(){ 
     console.log(ticketModel); 
     console.log($('#tab-content-template').html()); 
     var template = _.template($('#tab-content-template').html(), {ticketId: that.ticketId}); 
     this.$el.html(template); 
    }); 
},

但不幸的是，這將導致一個錯誤，說

Uncaugt TypeError: Cannot read property 'html' of undefined.

奇怪的是，它輸出HTML控制檯正確地從console.log($('#tab-content-template').html());產生。我得到的錯誤是this.$el.html(template);

這條線怎麼可能是它首先能夠得到html（），然後它說它找不到屬性html？我完全卡在這裏..：S

歡迎所有提示！

來源

2014-07-18 kramer65

從這裏學到了一些新東西沒有意識到fetch返回$。推遲對象，歡呼聲 – Quince

您的問題是不再指您認爲它指的是什麼。在你的代碼中你已經放置了

var that = this;

這是一個常見的模式/技巧，允許閉包在執行時保留「this」的上下文。在你的封閉內部「這個」現在指的是你認爲的「this」應該指向的內容。

嘗試改變「這個」爲「是」

$.when(ticketModel.fetch()).done(function(){ 
     console.log(ticketModel); 
     console.log($('#tab-content-template').html()); 
     var template = _.template($('#tab-content-template').html(), {ticketId: that.ticketId}); 
     that.$el.html(template); 
    });

我usally使用，以確保當執行一個功能，你可以確信上下文的jQuery的代理功能的運行它

爲什麼$（'＃tab-content-template'）。html（）正常工作，這是因爲您直接使用JQuery，它位於全局命名空間中，因此存在可訪問的地方，如$ el是您視圖的屬性，因此如果您無法訪問您的視圖，則無法訪問這是財產。

來源

2014-07-18 10:45:35 Quince

@ kramer65這是否解決了您的問題？ – Quince

見http://backbonejs.org/#Model-fetch - 在options論證它接受success和error回調：

ticketModel.fetch({ 
    success: function(model, response, options) { 
     // render the template 
    } 
});

此外，如果你需要使用當前視圖對象的情況下在這個回調可以使用下劃線/羅短跑_.bind()功能通過上下文：

ticketModel.fetch({ 
    success: _.bind(function(model, response, options) { 
     // Render the template using some method of the view: 
     this.renderMyTemplate(model); 
    }, this) 
});

或只是通過方法本身：

ticketModel.fetch({ 
    success: this.renderMyTemplate, 
    error: this.handleFetchError 
});

來源

2014-07-18 10:52:48

在這裏，骨幹現在不需要$ .fhen現在返回提取調用的承諾。下面的代碼應該適合你。還要考慮編譯模板外部的渲染功能。編譯模板有點繁重，一旦完成就應該緩存。

var _this = this; 
ticketModel.fetch().done(function() { 
    var template = _.template($('#tab-content-template').html(), {ticketId: that.ticketId}); 
    _this.$el.html(template); 
});

來源

2014-07-19 20:40:14

myModel.fetch（）完成時渲染主幹模板？

回答

相關問題