Javascript 在父视图初始化子视图时，backbone.js$el不可用

我正在尝试渲染主干中视图中的子视图。我遵循这个例子：

这似乎很管用。这是我的父视图代码：

define([
  'jquery',
  'underscore',
  'backbone',
  'models/products/ProductsModel',
  'views/products/ProductsFiltersView',
  'text!templates/products/productsTemplate.html',
], function($, _, Backbone,ProductsModel,ProductsFiltersView,productsTemplate){

  var ProductsView = Backbone.View.extend({
    el: $("#page"),

    initialize: function(){
      var self = this;
      self.model = new ProductsModel();
    },

    render: function(){
      var pageTitle = this.model.get('title');
      document.title = pageTitle;
      var pageData = {
        title: pageTitle
      }

      var compiledTemplate = _.template( productsTemplate ); //prerender template
      this.$el.html(compiledTemplate(pageData));

      this.renderFiltersView();

    },

    renderFiltersView: function(){
      var productsFiltersView = new ProductsFiltersView();
      productsFiltersView.render();
    }

  });

  return ProductsView;

});

这是我的子视图代码：

define([
  'jquery',
  'underscore',
  'backbone',
  'text!templates/products/productsFiltersTemplate.html',
], function($, _, Backbone,productsFiltersTemplate){

  var ProductsFiltersView = Backbone.View.extend({
    el: $(".filters.product"),

    events : {
          "click .filter-options-container" : "filterOptionContainerClick"
    },

    initialize: function(){
      var self = this;
    },

    render: function(){
      var compiledTemplate = _.template( productsFiltersTemplate ); //prerender template
      this.$el.html(compiledTemplate()); //this.$el.length = 0;
      //$(.filters.product').html(compiledTemplate()) //this works


      this.inlineSVG($('.filter-option')); //need to convert img tags to inline svg so we can manipulate their fill color dynamically
    }
  })

  return ProductsFiltersView;

});

没有抛出任何错误，如果我将子视图中的this.$el.html更改为action jquery选择器，则会呈现该视图，但我想修复总体问题，即该视图是在父视图的DOM内容准备就绪之前实例化的。有人知道我做错了什么吗

--编辑--

这是我的父母模板

<div class="page-container products cf">
    <div class="products-and-filters">
        <div class="products-container">

        </div>
        <div class="filters product">

        </div>
    </div>
    <div class="wishlist products">

    </div>
</div>

试试看

---

在子视图的初始化方法中，

.filters.product

来自哪里？这可能是由父级模板生成的吗？filters.product是由父级模板生成的，是的，因此它不会在您期望的DOM中。总是有

新的子视图（{el:this.$（'.filters.product'）}）

。编辑您的答案，现在就可以了。欢迎来到堆栈溢出！

this.setElement(".filters.product")