Question

我差点完成了backbone.js应用程序，我想知道我选择用于显示项目表的方法是否正确。

我所拥有的代码显示了一些项目如下：

var items = new Items();

items.fetch({
    success: function(){
        var itemsView = new ItemsView(items);
        itemsView.$el.appendTo('#content-wrapper');
        // Here I run some functions that
        // remove all elements of the prev page
    }
});

window.Item = Backbone.Model.extend({});

window.Items = Backbone.Collection.extend({
    model: Items,
    url: 'items'
});

window.ItemsView = Backbone.View.extend({
    tagName: 'table',
    id: 'items',
    initialize: function(items) {
        _.bindAll(this, 'render');
        this.items = items;
        this.items.bind('reset', this.render);
        this.render();
    },
    render: function () {
        var self = this;
        this.items.each(function (item) {
            self.addItem(item);
        });
        return this;
    },
    addItem: function(item) {
        var itemView = new window.ItemView(item);
        this.$el.append(itemView.el);
    }
});

window.ItemView = Backbone.View.extend({
    tagName: 'tr',
    initialize: function (item) {
        _.bindAll(this, 'render', 'serverChange');
        this.item = item;
        // Note that I am using Backbone.IO, it has a slightly 
        // different sync functions to support Socket.IO
        this.item.ioBind('update', this.serverChange, this);
        this.render();
    },
    serverChange: function(data){
        this.item.set(data);
        this.render();
    },
    render: function () {
        this.$el.html(_.template('<td><%=name%></td>', this.item.toJSON()));
        return this;
    }
});

问题

我面临的问题如下。这段代码生成的HTML很难看。

它为我的模型中的每个变量创建了一个HTML属性。它看起来像这样：

<table id="items">
    <tr name="Awesome Product" id="75483920743829930" _id="75483920743829930" type="gel" price="200.00" stock="5">
        <td>Awesome Product</td>
    </tr>
</table>

这不是我想要的。

为什么我选择这种方法

我使用了这种方法，因为每个项目（tr）都有自己的视图。因此，当一个模型发生变化时，它不需要重新渲染整个表，只需要一个视图。

是否有更优雅的方法可以解决这个问题，而不会产生混乱的HTML。

Answer 1

获得所有这些额外属性的原因是因为您将模型直接传递给构造函数，而不是将其作为模型传递。 Backbone正在读取模型的属性，并将它们作为html属性添加到视图中。

通常你会传递这样的模型（Straight from the Backbone docs）

var doc = Documents.first();

new DocumentRow({
  model: doc,
  id: "document-row-" + doc.id
});

看看这个jsFiddle。我稍微改变了你的视图以使用模型，它现在渲染没有那些额外的html属性。

优化我的模型/视图，显示简单的项目列表

问题

为什么我选择这种方法

1 个答案: