为什么骨干视图没有定义?

Why is the Backbone Views el undefined?

本文关键字：定义 视图 为什么      更新时间：2023-09-26

我不知道为什么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>

有几件事可以解释——我对view $el返回undefined的直接直觉是，因为它是父视图，当视图实例化时，模板中的HTML还没有创建。因此，它无法在DOM中找到'js-parent'类。解决这个问题的方法包括:

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

看这个来自mu的答案太短了(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());

一致使用el和$el。这是我历经艰辛才发现的。我读了艾迪·奥斯马尼书里关于脊椎骨的内容。它提到$el和el是相同的东西，但是当尝试时，结果并非如此。

相关文章：