Question

我一直在学习Backbone.js，我正在使用django上的应用程序，其中最初显示两张照片：一张是主照片，另一张是下一张照片的缩略图。我已经在网址/api/v1/photo中使用Tastypie返回了包含mainphoto网址和缩略图照片的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，其中模板参数用于显示主要照片。

<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!);
  }
});

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

1 个答案: