Question

我在渲染Backbone Collection View时遇到了一些困难。

在我的HTML中，我有一个ID为member-list的div：

<div id="member-list"></div>

用于保存实际列表的视图称为MemberListView：

var Backbone = require('backbone');
var $ = require('jquery');
var MemberListItemView = require('MemberListItemView');

return Backbone.View.extend({
  tagName: 'ul',

  render: function () {
    this.collection.each(function (item) {
      this.$el.append(new MemberListItemView({ model: item }).render().el);
    }.bind(this));

    return this;
  },
});

每个项目都由MemberListItemView表示：

var Backbone = require('backbone');
var $ = require('jquery');
var _ = require('underscore');

return Backbone.View.extend({
  template: '_.template($("#memberItemTemplate").html())',

  tagName: 'li',

  render: function () {
    this.$el.html(this.template(this.model.toJSON()));

    return this;
  },
});

从父视图中，我这样调用MemberListView：

this.list = new MemberListView({ collection: this.collection });
this.list.setElement('#member-list').render();

不幸的是，HTML输出不正确，ul丢失了：

<div id="member-list">
  <li>Member</li>
  <li>Member</li>
  <li>Member</li>
</div>

我认为问题与使用setElement有关 - 可能是因为已经有el或类似的事情。

如何将<ul>添加到输出中并强制MemberListView不要忽略tagName？

Answer 1

return Backbone.View.extend({
  template: '_.template($("#memberItemTemplate").html())',

你的tempalte似乎是一个字符串，而不是一个tempalte。我猜你想要的是这样的：

return Backbone.View.extend({
  template: _.template($("#memberItemTemplate").html()),

也代替

this.list = new MemberListView({ collection: this.collection });
this.list.setElement('#member-list').render()

尝试

this.list = new MemberListView({ collection: this.collection, el: $('#member-list') });
this.list.render();

Backbone：渲染集合视图 - tagName被忽略

1 个答案: