骨干网获取 url 并将模板参数发送到 javascript 模板答案

【问题标题】：Backbone fetching url and sending templateargs to javascript template骨干网获取 url 并将模板参数发送到 javascript 模板
【发布时间】：2013-11-29 06:06:10
【问题描述】：

我一直在学习 Backbone.js，我在 django 上的一个应用程序中使用它，最初显示两张照片：一张是主照片，另一张是下一张照片的缩略图。我返回了 json 数据，其中包含 mainphoto 的 url 和使用 Tastypie 在 url /api/v1/photo 中的缩略图。所以，我在 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 调试器的调试窗口中看到时。

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

【问题讨论】：

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

标签： javascript django backbone.js backbone-views

【解决方案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!);
  }
});

【讨论】：