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

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和$ el。 这是我发现困难的方法。 我正在阅读Addy Osmani的书中有关骨干的文章。 它提到$ el和el是同一回事 ，但是当尝试时， 事实并非如此 。 也许这是较新版本的骨干网中的更改，但我不确定。

Answer 2

可能有几件事可以解释-关于$ el为什么返回未定义视图的直觉是，由于它是父视图，因此在实例化该视图时尚未创建模板中的HTML。 结果，它在DOM中找不到类“ js-parent”。 解决此问题的方法包括：

1）在视图初始化函数中执行集合获取，然后从集合获取success回调中调用render。

看到这个答案从亩太短（SO骨干王）

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

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

3）从jquery ready函数中调用render（这将是绝望的时间）。

另外需要注意的是，最好不要在视图中定义$ el。

最后，我阅读的大多数骨干代码都使用这种方法来呈现模板： this.template(this.model.toJSON());