Backbone.js的「不確定」 get請求

Question

這是我的代碼：

$(function(){ 
var Slide = Backbone.Model.extend({ 
    defaults: { 
     castid :1, 
     id  :1 
    }, 
    urlRoot: function(){ 
     return 'slidecasts/' + this.get("castid") + '/slides/'; 
    }, 
}); 


var SlideView = Backbone.View.extend({ 
    el: $("#presentation"), 
    events: { 
     'click #next': 'next', 
     'click #previous': 'previous', 
    }, 
    initialize: function(){ 
     _.bindAll(this, 'render', 'next'); 
     this.model.bind('change', this.render); 
     this.render(); 
    }, 
    render: function(){ 
     this.model.fetch(); 
     var variables = { 
      presentation_name: "This is a Slide-Number: ", 
      slidenumber: "xxx", 
      imageurl: this.model.url() +"/"+ this.model.get('imageLinks'), 
      slide_content: this.model.get("content")}; 
     var template = _.template($("#slide_template").html(), variables); 
     this.$el.html(template); 
     return this; 
    }, 
    next: function(){ 
     console.log(this.model.id); 
     this.model.nextslide(); 
    }, 
    previous: function(){ 
     console.log("previous function in view"); 
    } 
}); 

testslide = new Slide(); 
var slideView = new SlideView({model: testslide}); 

}); 

這工作正常，但在調試控制檯我總是看到一個GET請求「slidecasts/1 /幻燈片/ 1 /不確定」，這當然失敗了。我不明白我在哪裏觸發了這個獲取請求。

編輯 - 模板代碼

<script type="text/template" id="slide_template"> 
    <label>Presentation <%= presentation_name %> </label> <br/> 
    <img src="<%= imageurl %>" id="slide_pic" /> <br/> 
    <textarea id="slide_content"> 
    <%= slide_content %> 
    </textarea> 
    <div id="next">next slide </div> 
    <div id="previous">previous slide </div> 
</script> 

Answer 1

您有一個異步問題。

這是事件發生的順序：

1. 你叫this.model.fetch()填充模型。
2. 你說variables.imageurl = this.model.url() + '/' + this.model.get('imageLinks')。
3. （異步）fetch尚未返回，因此this.model.get('imageLinks')爲undefined。
4. 您構建HTML並使用this.$el.html(template)來更新頁面。
5. 瀏覽器使用不正確的imageurl從呈現HTML。
6. 由於記錄了一個不好的GET請求。
7. fetch from 從服務器返回並觸發'change'事件。
8. 0123'事件將觸發新的render。
9. 這個render呼叫有一個完全填充的this.model所以variables.imageurl是正確的，並且HTML現在出來了。

如果讓fetch觸發render那麼這個問題就會迎刃而解：正確顯示

initialize: function(){ 
    _.bindAll(this, 'render', 'next'); 
    this.model.bind('change', this.render); 
    this.model.fetch(); 
}, 
render: function() { 
    // As before except no this.model.fetch() 
} 

Answer 2

我怎麼看不到模板您使用我只是猜測這裏：

的問題是在這條線：

​​

您的模板正在嘗試使用此URL定義<img>元素，但imageLinks屬性爲undefined。