0

リモートサービスからJSONオブジェクトの配列を取得し、それらを表示する基本的なBackboneアプリケーションがあります。これまでのところすべて問題ありません。ただし、各JSONオブジェクトにはタグの配列があり、Webページの個別の領域にタグを表示したいと思います。

私の質問は、これを行うための最もバックボーンに優しい方法は何ですか？2番目のビューで既存のデータを再度解析できます。これは、よりクリーンですが、より多くの計算を必要とします（配列全体を2回処理します）。

別の方法は、配列を処理しているときにプライマリビューでタグ情報を収集し、それを補助ビューに渡すことですが、ビューをリンクしています。

最後に、これらのタグに基づいてフィルタリングしたいと思います（したがって、タグはトグルボタンになり、これらのボタンをオン/オフにすると、プライマリビューの情報がフィルタリングされます）。これは、これをどのように配置するかについて何か違いがありますか？

コードスニペットのボーナスポイント。

4

1 に答える 1

0

うーん。これがバックボーンに適した方法かどうかはわかりませんが、コレクション内のタグのリストを取得するロジックを配置します（これが「解析」の意味だと思います）。

メインビューとサブビューの両方が同じコレクションを「リッスン」し、サブビューは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());
    }
});

コレクションでこれを処理する理由は2つあると思います。

  • これにより、Viewコードがよりクリーンに保たれます（これは、タグ抽出で非常に複雑なロジックを実行していないことを前提としています。これは、単純な_.pluck（）と_.union（）です。
  • 関係するビジネスロジックは0です-おそらくデータレイヤーに属することができます。

パフォーマンスの問題に対処するには：

  • コレクションは2回実行されます-ただし、この場合でも、消費しているデータの量が多すぎてクライアントが処理できない場合は、バックエンドにこのためのAPIエンドポイントを提供するように依頼することを検討してください。（合計1000個のタグを持つ500個のデータでさえ、最近のブラウザでは処理しきれないほど多くはありません。）

うーん。これは役に立ちますか？

JSFiddleは、コレクションとモデルでこれに対応します：http://jsfiddle.net/dashk/G8LaB/ （そして、の結果を示すログステートメント.getTags()）。

于 2013-02-12T15:05:25.500 に答える