1

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

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 没有像在控制台中那样被渲染。任何想法为什么？

4

1 回答 1

3

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

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

在控制台中执行代码可能会让 AJAX 调用有时间在您尝试使用activities.

你应该做两件事：

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

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

于 2012-09-15T17:38:22.973 回答