1

我正在尝试开发我的第一个主干应用程序。一切似乎都很好，但是当我渲染视图并将一些 html 附加到 时$el，页面中没有渲染任何内容。休息服务调用完成，Backbone.Router.extend内部声明$(document).ready(function () {});以确保创建 DOM。调试我的javascript，该元素在innerHTMLel属性中包含正确的值，但是当整个页面呈现时，该值不会出现在页面中。

我究竟做错了什么？

我的查看代码：

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

我在这里加载产品（内部Backbone.Router.extend）。这是正确执行的：

this.productsList = new ProductsCollection();
this.productsListView = new ProductsListView({ model: this.productsList });
this.productsList.fetch();

这是我要渲染的 html 元素：

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

提前致谢，

4

2 回答 2

2

从您发布的代码中，您实际上并没有将您ProductsListView的内容插入 DOM 或将其附加到现有的 DOM 元素。

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

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

通常在列表的情况下，列表已经存在于页面上，并且它的项目是动态添加的。我已经在这个 jsfiddle中获取了您的代码并对其进行了轻微的重组。您将看到ProductListViewis 绑定到现有的ul，并且ProductItemView' 在添加到 Collection 时会动态附加。

更新了 jsfiddle 以演示 Collection.reset

于 2013-03-06T08:46:38.167 回答
1

el无论是否渲染，该属性都存在于视图中。您不能说那里没问题，因为如果没有传递任何元素（空 div），Backbone 将创建一个元素。

如果要渲染视图，您应该确定元素的容器是什么？你有一个要附加视图的 html 吗？

尝试通过使用ellike调用视图来传递容器元素

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

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

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

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

于 2013-03-06T08:36:11.160 回答