Question

我有两个视图，我想在第一个视图中渲染第二个视图。我这样做：

第一个观点：

var EventContainer = Backbone.View.extend({
  el: '#sectionContainer',
  initialize: function() {
    this.render();
  },
  render: function() {
    var that = this;
    $.get('templates/home/eventContainer.html', function(data) {
        that.template = _.template(data, {}); //Option to pass any dynamic values to template
        $(that.el).append(that.template); //adding the template content to the main template.
    }, 'html');

    new EventList();

    return this;
  }
});

第一个视图的模板：

<div class="main-content pull-left">
    <ul id="eventList" class="event-list no-list-style no-padding"> </ul>
</div>

第二种观点：

var EventList = Backbone.View.extend({
  el: '#eventList',
  initialize: function() {
    var that = this;
    this.EventsCollection = new EventsCollection();
    this.EventsCollection.fetch({
        success: function(data) {
            that.collection = data;
            that.setTemplate();
        },
        error: function() {}
    });
  },
  setTemplate: function() {
    var that = this;
    $.get('templates/home/eventList.html', function(data) {
        that.template = _.template(data);
        that.render();
    }, 'html');
  },
  render: function() {
    var that = this;

    this.collection.each(function(eventData) {
        var eventTemplate = that.template(eventData.toJSON());
        console.log('---> ' + $(that.el));
        $(that.el).append(eventTemplate);
    });

    return this;

  }
});

第二个视图的模板：

<li class="event-item">
    <small><%= like_count%> </small>
</li>

当我尝试渲染第二个视图时， el 未定义。

我做错了什么？

感谢。

Answer 1

如果您查看this.el内的EventList#initialize，我认为您会发现它是undefined而不是<ul>您期望它是。那为什么会这样？ #eventList来自哪里？ #eventList来自EventContainer的模板，在此AJAX调用之前不会出现在DOM中：

$.get('templates/home/eventContainer.html', ...)

完成。直到$.get之后，new EventList();才会完成。当您实例化EventList时，它会查找#eventList，但找不到任何内容，这将使您this.el为undefined。然后，$.get将返回，#eventList将显示在DOM中;这就是$('#eventList')有效的原因。

简单的解决方案是推迟实例化EventList，直到您向DOM添加必要的内容为止：

$.get('templates/home/eventContainer.html', function(data) {
    that.template = _.template(data, {});
    $(that.el).append(that.template);
    new EventList(); // <-----------------------
}, 'html');

如果你要这样做，那么你可以通过从el定义中删除EventList并在创建视图时指定它来明确依赖：

$.get('templates/home/eventContainer.html', function(data) {
    that.template = _.template(data, {});
    $(that.el).append(that.template);
    new EventList({ el: that.$('#eventList') });
}, 'html');

BackboneJs无法在渲染模板中渲染模板

1 个答案: