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 回答