Javascript 主干子视图和父视图不能同时工作

我是个新手。当我试图同时渲染父视图和子视图时，只渲染了父视图！我想知道为什么会发生这种情况，还有什么其他方法可以做到这一点

childView.js:

var ChildView = Backbone.View.extend({
  template: _.template($('#foo').html()),
  initialize: function() {
  },
  render: function() {
    $(this.el).html(this.template({}));
    return this;
  }
});

var ParentView = Backbone.View.extend({
  el: $('body'),
  initialize: function() {
    this.childView = new ChildView();
    this.render();
  },
  render: function() {
    var self = this;
    $.get('templates/parentView.html', function(data) {
      template = _.template(data, {});
      self.$el.html(template);
    }, 'html');
    $('#main').html(this.childView.render().el);
  },
});
var parentView = new ParentView();

<header>
  <h1>This is header</h1>
</header>
<main id="main">

</main>
<footer>
  <p>This is footer</p>
</footer>

parentView.js:

var ChildView = Backbone.View.extend({
  template: _.template($('#foo').html()),
  initialize: function() {
  },
  render: function() {
    $(this.el).html(this.template({}));
    return this;
  }
});

var ParentView = Backbone.View.extend({
  el: $('body'),
  initialize: function() {
    this.childView = new ChildView();
    this.render();
  },
  render: function() {
    var self = this;
    $.get('templates/parentView.html', function(data) {
      template = _.template(data, {});
      self.$el.html(template);
    }, 'html');
    $('#main').html(this.childView.render().el);
  },
});
var parentView = new ParentView();

<header>
  <h1>This is header</h1>
</header>
<main id="main">

</main>
<footer>
  <p>This is footer</p>
</footer>

parentView.html:

var ChildView = Backbone.View.extend({
  template: _.template($('#foo').html()),
  initialize: function() {
  },
  render: function() {
    $(this.el).html(this.template({}));
    return this;
  }
});

var ParentView = Backbone.View.extend({
  el: $('body'),
  initialize: function() {
    this.childView = new ChildView();
    this.render();
  },
  render: function() {
    var self = this;
    $.get('templates/parentView.html', function(data) {
      template = _.template(data, {});
      self.$el.html(template);
    }, 'html');
    $('#main').html(this.childView.render().el);
  },
});
var parentView = new ParentView();

<header>
  <h1>This is header</h1>
</header>
<main id="main">

</main>
<footer>
  <p>This is footer</p>
</footer>

这是标题
这是页脚

在父视图

render

函数中，子视图

el

被分配给

$（“#main”）

，但此时它不在DOM上，因为父视图

el

未附加到DOM，您可以进行以下更改，将子视图html分配给父视图

el

this.$el.find('#main').html(this.childView.render().el);
$(body).html(this.$el); 

---

$（“#main”）

在DOM上搜索元素，

this.$el.find（“#main”）

在

this.$el

元素子体中搜索元素。

可以做很多改进，以下是一些：

• 不需要使用jQuery全局选择器，也不需要将其用于视图的元素，也不需要用于范围限定的jQuery搜索
• 接受字符串或DOM元素，而不是jQuery对象

• render

  应该是幂等且快速的，不要每次都提取模板

• .html（）

  函数比仅

  .empty（）.append（）重一点

• 您可以将上下文传递给

  .get（）

  （成功）回调
• 要将视图指定给现有图元时使用

儿童视图 父视图 实例化

---

是不是$get（）jQuery函数不会将parentView设置为DOM？@MuneebPullani请更具体一点。当我混合使用这两个答案时，它会起作用。除非不是@MuneebPullani另一个答案解释了为什么你的代码不起作用，而我的答案说明了应该怎么做。