主干获取url并将templateargs发送到javascript模板

我一直在学习Backbone.js，我正在django上的一个应用程序中使用它，最初会显示两张照片：一张是主照片，另一张是下一张照片的缩略图。我在url

/api/v1/photo

中使用tastype返回了包含mainphoto和缩略图的url的json数据。所以，我在主干中所做的是：

// MODEL
var PhotoItem = Backbone.Model.extend({
    urlRoot:  '/api/v1/photo',
});

var PhotoView = Backbone.View.extend({
template: _.template($('#mainimg').html()),
initialize: function()  {
    this.render();
},
render: function(){

    var templateArgs={
        photo: this.model.get('photo')
    };
    alert(this.model.get('photo')); // this alerts undefined
    this.$el.html(this.template(templateArgs));
}
});

var photoItem = new PhotoItem({id:1});
photoItem.fetch();
var photoView = new PhotoView({model: photoItem});

在django模板中，这里是javascript，模板参数用于显示主照片

<script type="text/template" id="mainimg">
<img class = "main-img" id="mainimgid" src = <%= photo %> alt="main photo" />
</script>

但是，无法加载图像。我收到一个javascript 404错误：

http://localhost:8000/undefined

我想这可能是由于代码的异步加载。图像的src保持不变

<img class = "main-img" id="mainimgid" src = <%= photo %> alt="main photo" />

alt=“主照片”/>

当我在调试窗口上看到Chrome调试器时

---

我错过了什么？或者我错在哪里？我可以获得帮助吗？

如果不从服务器实际接收信息，则无法创建视图。您基本上是在向视图控制器传递一个空的主干模型，这就是为什么

model.get（'photo'）

返回未定义的。我建议您查看基本的AJAX，因为

Backbone.Model.fetch

就是这样做的

异步调用会立即返回，以避免冻结用户交互。这就是为什么在从服务器获得响应之前不应该创建视图的原因。正确的解决方案如下：

var photoItem = new PhotoItem({id:1}), photoView;
photoItem.fetch({
  success: function () {
    photoView = new PhotoView({model: photoItem});
  },
  error: function () {
    alert('Something bad happened!);
  }
});

---

在模型实例化之后添加fetch调用也不起作用。

var photoItem = new PhotoItem({id:1}), photoView;
photoItem.fetch({
  success: function () {
    photoView = new PhotoView({model: photoItem});
  },
  error: function () {
    alert('Something bad happened!);
  }
});