1

这是我的代码：

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

});

这工作正常，但在调试控制台中，我总是看到“slidecasts/1/slides/1/undefined”的 GET 请求，这当然会失败。我真的不明白我在哪里触发了这个获取请求。

编辑 - 模板代码

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

2 回答 2

4

你有一个异步问题。

这是事件的顺序：

  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浏览器使用不正确的2呈现您的 HTML 。
  6. 由于5记录了错误的 GET 请求。
  7. fetchfrom 1从服务器返回并触发一个'change'事件。
  8. 该'change'事件触发对 的新调用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()
}
于 2012-06-04T18:57:25.527 回答
1

我怎么看不到您正在使用的模板我只是在这里猜测：

问题出在这一行：

this.model.url() +"/"+ this.model.get('imageLinks'),

您的模板正在尝试<img>使用此类 URL 定义一个元素，但该imageLinks属性未定义。

于 2012-06-04T18:10:09.387 回答