為什么未定義主干網視圖？

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());