使用 Backbone 渲染 Handlebars 模板

Question

我有一个我认为做正确的事情的主干视图（见下文）

Index = Backbone.View.extend({
render: function() {
        var activities = new Activities();
        activities.fetch();
        var tpl = Handlebars.compile($("#activities-template").html());
        $(this.el).html(tpl({activities: activities.toJSON()}));
        return this;
      }
});

如果使用 Chrome JS 控制台执行 render() 函数中的每一行，我会得到预期的结果，我传入的元素会填充模板输出。但是，当我使用以下命令运行它时

var i = new Index({el: $("body")})
i.render()

"i.$el" 完全是空的——HTML 没有像在控制台中那样被渲染。任何想法为什么？

Answer 1

fetch 是一个 AJAX 调用，因此无法保证 activities.toJSON() 在您执行此操作时会为您提供任何数据：

activities.fetch();
var tpl = Handlebars.compile($("#activities-template").html());
$(this.el).html(tpl({activities: activities.toJSON()}));

在您尝试使用 activities 之前，在控制台中执行代码可能会给 AJAX 调用时间以返回一些内容。

你应该做两件事：

1. 如果activities 为空，请修复您的模板以执行一些明智的操作（例如显示正在加载... 消息）。

2. 将视图的render 附加到集合的"reset" 事件：

   initialize: function() {
       // Or, more commonly, create the collection outside the view
       // and say `new View({ collection: ... })`
       this.collection = new Activities();
       this.collection.on('reset', this.render, this);
       this.collection.fetch();
   },
   render: function() {
       var tpl = Handlebars.compile($("#activities-template").html());
       this.$el.html(tpl({activities: this.collection.toJSON()}));
       return this;
   }
   

我也切换到this.$el，当Backbone已经给你this.$el时，不需要$(this.el)。