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

Question

我一直在学习Backbone.js，并且在django上的一个应用程序中使用了它，最初显示了两张照片：一张是主照片，另一张是下一张照片的缩略图。 我已经使用url /api/v1/photo的Tastypie返回了包含mainphoto和缩略图的URL的json数据。 因此，我在Backbone中所做的是：

// 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-template中，这是javascript，其中template参数用于显示主照片。

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

这是为id == 1的photoItem返回的json数据：

{"next_url": "/photos/preloaded/designstyles/thumb/arabic-living(main-photo-id)-thumbnail.png",
 "parent_id": "1","photo": "/photos/preloaded/designstyles/big/arabic-bedroom.png",
 "photo_id": "1", "resource_uri": "", "tags": "set([Decimal('2'), Decimal('3')])", "type": "Homedesign"}

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

http://localhost:8000/undefined

我想这可能是由于代码的异步加载所致。 并且图像的src仍然存在

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

当我在使用Chrome调试器的调试窗口中看到时。

我想念什么？ 还是我在哪里错？ 我可以得到帮助吗？

Answer 1

在未实际从服务器接收信息的情况下，您无法创建视图。 您基本上是将一个空的Backbone模型传递给视图控制器，这就是为什么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!);
  }
});