Question

我有一个基本的Backbone应用程序，它从远程服务获取一组JSON对象并显示它们：到目前为止一切都很好。但是，每个JSON对象都有一个标记数组，我想在网页的单独区域中显示标记。

我的问题是：最友好的Backbone方式是什么？我可以在第二个视图中再次解析现有数据，这个视图更干净但需要更多计算（处理整个数组两次）。

另一种方法是在主视图中收集标记信息，因为它正在处理数组，然后将其传递给辅助视图，但之后我将这些视图链接在一起。

最后，我想基于这些标签进行过滤（因此标签将成为切换按钮，打开/关闭这些按钮将过滤主视图中的信息）;这对于如何布局会有什么不同吗？

代码段的加分点。

Answer 1

嗯。我不确定这是否是Backbone友好的方式，但我会在逻辑中检索一个标签列表（我认为这就是你在“解析”中的意思）。

主视图和子视图都会“监听”同一个集合，子视图只会调用collection.getTags（）来获取所需的标记列表。

// Model that represents the list data
var ListDataModel = Backbone.Model.extend({
    defaults: function() {
        return {
            name: null,
            tags: []
        };
    }
});

// Collection of list data
var ListDataCollection = Backbone.Collection.extend({
    model: ListDataModel,
    initialize: function() {
        var me = this;

        // Expires tag collection on reset/change
        this.on('reset', this.expireTagCache, this);
        this.on('change', this.expireTagCache, this);
    },
    /**
     * Expires tag cache
     * @private
     */
    expireTagCache: function() {
        this._cachedTags = null;
    },
    /**
     * Retrieves an array of tags in collection
     * 
     * @return {Array}
     */
    getTags: function() {
        if (this._cachedTags === null) {
            this._cachedTags = _.union.apply(this, this.pluck('tags'));
        }

        return this._cachedTags;
    },

    sync: function(method, model, options) {
        if (method === 'read') {
            var me = this;

            // Make an XHR request to get data for this demo
            Backbone.ajax({
                url: '/echo/json/',
                method: 'POST',
                data: {
                    // Feed mock data into JSFiddle's mock XHR response
                    json: JSON.stringify([
                        { id: 1, name: 'one', tags: [ 'number', 'first', 'odd' ] },
                        { id: 2, name: 'two', tags: [ 'number', 'even' ] },
                        { id: 3, name: 'a', tags: [ 'alphabet', 'first' ] }
                    ]),
                },
                success: function(resp) {
                    options.success(me, resp, options);
                },
                error: function() {
                    if (options.error) {
                        options.error();
                    }
                }
            });
        }
        else {
            // Call the default sync method for other sync method
            Backbone.Collection.prototype.sync.apply(this, arguments);
        }
    }
});

var listColl = new ListDataCollection();
listColl.fetch({
    success: function() {
        console.log(listColl.getTags());
    }
});

我想在集合中处理这个的两个原因是：

它使View代码更清晰（这是因为我们在标记提取中没有做非常复杂的逻辑 - 它只是一个简单的_.pluck（）和_.union（）。
它涉及0个业务逻辑 - 它可以说属于数据层。

解决性能问题：

它确实经历了两次收集 - 但是，如果您正在使用的数据量过多，即使在这种情况下客户端也无法处理，您可能需要考虑让Backend为此提供API端点。（即使500个数据共有1000个标签，对于现代的浏览器来说也不应该太多。）

嗯。这有帮助吗？

JSFiddle将其与集合和模型一起使用：http://jsfiddle.net/dashk/G8LaB/（以及用于演示.getTags()结果的日志语句。）

处理Backbone.js中的子视图

1 个答案: