0

我几乎完成了一个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。

4

1 回答 1

2

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

通常你会像这样传入模型（直接来自 Backbone 文档）

var doc = Documents.first();

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

看看这个jsFiddle。我稍微修改了您的视图以使用模型，现在它在没有那些额外的 html 属性的情况下呈现。

于 2012-04-21T00:35:20.060 回答