为什么主干视图 el 未定义？

Question

我不确定为什么我的 Backbone.View 中的 el 未定义。

这是我当前代码的一个小提琴：http://jsfiddle.net/NC47C/

这里是 JavaScript：

var TheModel = Backbone.Model.extend({
  defaults: {
    color: 'Red',
    message: null,
    endOfLine: null
  }
});

var TheCollection = Backbone.Model.extend({
  model: TheModel,

  url: 'http://jsonstub.com/test/1'
});

var ParentView = Backbone.Model.extend({
  el: '.js-parent',

  initialize: function () {
    this.collection = new TheCollection();
    console.log(this.$el);

    return this;
  },

  myTemplate: function (scriptID, data) {
    var temp = _.template( $(scriptID).html(), {model: data} );

    this.$el.html(temp);

    return this;
  },

  render: function () {
    var self = this;

    this.collection.fetch({
        type: 'GET',
        beforeSend: function (request) {
            request.setRequestHeader('JsonStub-User-Key', 'xxxxxxxxxxxxx');
            request.setRequestHeader('JsonStub-Project-Key', 'xxxxxxxxxxxx');
        },
        success: function (data) {
            console.log( 'data =',data.toJSON() );

            self.myTemplate('#parentTemplate', self.collection);
        },
        error: function () {
            console.log('ERROR!!!');
        }
    });   

    return this;
  }

});

var parent = new ParentView();
parent.render();

这是我的 HTML：

<script type="text/template" id="parentTemplate">
  <h1>hi</h1>
</script>


<div class="js-parent">

</div>

Answer 1

有几件事可以解释——我对视图 $el 为什么返回 undefined 的直接预感是，因为它是父视图，所以在实例化视图时还没有创建模板中的 HTML。结果，它在 DOM 中找不到类“js-parent”。解决此问题的方法包括：

1) 在视图初始化函数中获取集合，然后从集合获取success 回调中调用渲染。

来自mu的See this answer太短（SO骨干王）

2) 如果不这样做，请尝试分离视图的创建和渲染。您可以附加到硬编码（在您的 index.html 中）'appWrapper' div 元素，然后执行：

 var parent = new ParentView(); 
 $('#appWrapper').html(parent.render().el);

3) 从 jquery ready 函数中调用渲染（那将是绝望的时刻）。

作为附加说明，最好不要在视图中定义 $el。

最后，我阅读的大多数主干代码都使用这种方法进行模板渲染：this.template(this.model.toJSON());

Answer 2

始终使用 el 和 $el。这是我发现困难的方式。我正在阅读 Addy Osmani 的书中关于骨干的内容。上面提到了$el和el是一回事，但是在尝试结果却不是这样。也许这是新版本主干的变化，但我不确定。