Javascript 主干和$el元素

我正在尝试开发我的第一个主干应用程序。看起来一切正常，但当我呈现视图并向

$el

添加一些html时，页面中没有呈现任何内容。 Rest服务调用完成正常，

主干.Router.extend

在

$（document.ready）（函数（）{}）中声明

以确保创建DOM。 调试我的javascript时，

el

元素会在innerHTML属性中包含正确的值，但是当呈现整个页面时，该值不会出现在页面中

我做错了什么

我的视图代码：

window.ProductsListView = Backbone.View.extend({

  id: 'tblProducts',
  tagName: 'div',

  initialize: function (options) {
    this.model.on('reset', this.render, this);
  },

  render: function () {
    // save a reference to the view object
    var self = this;

    // instantiate and render children
    this.model.each(function (item) {
      var itemView = new ProductListItemView({ model: item });
      var elValue = itemView.render().el;
      self.$el.append(elValue);  // Here: the $el innerHTML is ok, but in the page it disappear. The id of element is div#tblProducts, so the element seems correct
    });

    return this;
  }
});

window.ProductListItemView = Backbone.View.extend({

  tagName: 'div',

  template: _.template(
      '<%= title %>'
    ),

  initialize: function (options) {

    this.model.on('change', this.render, this);
    this.model.on('reset', this.render, this);
    this.model.on('destroy', this.close, this);
  },

  render: function () {
    $(this.el).html(this.template(this.model.toJSON()));
    // $(this.el).html('aaaaaa');  // This neither works: it's not a template problem

    return this;
  },

  close: function () {
    $(this.el).unbind();
    $(this.el).remove();
  }
});

这是我想要呈现的html元素：

<div id="tblProducts">
</div>

---

提前感谢，

无论是否渲染，视图中都存在

el

属性。您不能说这是正常的，因为如果没有传递任何元素（空div），主干将创建一个元素

如果要渲染视图，应确定元素的容器是什么？是否有要将视图附加到的html

尝试通过调用带有

el

like的视图来传递容器元素

this.productsListView = new ProductsListView({ model: this.productsList, el : $("#container") });

当然，您可以稍后创建视图并将其附加到DOM：

el: $("#someElementID") //grab an existing element
el.append(view.render().el);

---

在将视图附加到某个位置之前，您的视图不会存在于dom中。

根据您发布的代码，您实际上并没有将

产品列表视图插入dom或将其附加到现有的dom元素

我喜欢看的方式是，您有两种类型的视图：


基于服务器返回的数据动态生成的
页面上已经存在的那些

通常在列表的情况下，该列表已经存在于页面上，并且动态添加其项。我接受了您的代码，并对其进行了轻微的重新构造。您将看到
ProductListView
绑定到现有的
ul
，并且
ProductItemView
在添加到集合时会动态追加

你能用简化的问题创建一个JSFIDLE吗？我还没有上传重置服务，所以我的代码只能在我的开发机器上运行。下次我会准备得更好。谢谢。但如果我想从rest服务获取集合中的数据，而不是逐个添加元素，该怎么办呢。我想我必须订阅“重置”事件，并在渲染中创建一个集合。我正在尝试模拟使用productCollection.reset（…）而没有运气。你非常接近！我已经用叉子叉好并修改了你的小提琴，以显示不同之处。请注意，
ProductListView
捕获的重置事件来自
ProductCollection
，而不是
Product
。它不适用于我。。。两者都看不到区别（仅集合命名而非模型）。谢谢@jucople请查看我原始答案的底部链接。正如你所期望的那样，这很有希望。谢谢你，我理解。讨论将元素添加到DOM的时间。1）将el传递到视图并渲染自身，还是2）稍后使用$（“#someContainerID”）.append（view.render（）.el）添加？
el: $("#someElementID") //grab an existing element
el.append(view.render().el);