2

私は RequireJS でバックボーンを使用しています。私のビューは、それぞれの RESTful API に対応する、たとえば 20 個のコレクションを切り替える必要があります。

「通常の」方法で問題なく処理できますが、API ごとに新しい Collection を定義する必要があるため、コードベースが非常に肥大化します。

コレクション（×20回）

define(function(require) {
    var Backbone = require('backbone');

    var c = Backbone.Collection.extend({
        url: '/path/to/api-1'
    });

    return new c();
});

意見

define(function(require) {
    var Backbone = require('backbone'),
           c1 = require('./collections/collection-1'),
           ...
           c20 = require('./collections/collection-20');

    var v = Backbone.View.extend({
        /* Some methods to toggle between Collections here */
    });

    return v;
});

Collection 内でのみ実行し、View 内return c;で呼び出すnew c({url: /path/to/api-1});ことで、非常に重複した Collection 定義を削減することができました。しかし今でnew c();は、呼び出しごとに API が常に呼び出されて、データの新しいコピーを取得します。これはリソースの浪費であり、私が望んでいないことです。

コレクションを「永続的」にする方法はありますか? 以下の基準をすべて満たすのはどれですか。

  • API の対応する Collection ごとに、1 つのみnewが実行されます。
  • 各コレクションは、RequireJS を使用して定義された異なるビュー間で共有/アクセスできます。
  • Collection の定義は、すべての API で再利用できます。
  • グローバル名前空間はまったく汚染されていません。
4

3 に答える 3

0

他の答えと同じように、AMDモジュールとして定義されたコレクション配列を持つことができます。

コレクション

define(['backbone', 'underscore'], function(Backbone, _) {
    var collections = [];

    var urls = ['/path/to/api-1', '/path/to/api-2', '/path/to/api-3'];

    _(urls).each(function(url) {
        collections.push(Backbone.Collection.extend({
            url: url
        }));
    });

    return collections;
});

そして、あなたの見解はそれを次のように使うことができます：

意見

define(['Backbone', 'collections'], function(Backbone, collections) {

    var v = Backbone.View.extend({
        /* Some methods to toggle between Collections here */
    });

    return v;
});
于 2012-09-02T16:35:30.760 に答える
0

新しいファイル/コレクションを作成する必要はありません。

あなたはあなたの見解でこのようなことをすることができます：

var collections = [];
collections.push( Backbone.Collection.extend({url: '/path/to/api-1'});
collections.push( Backbone.Collection.extend({url: '/path/to/api-2'});
collections.push( Backbone.Collection.extend({url: '/path/to/api-3'});

..。

collections.push( Backbone.Collection.extend({url: '/path/to/api-20'});

var view1 = Backbone.View.extend( {data:collections} );
var view2 = Backbone.View.extend( {data:collections} );

次に、すべてのコレクションがロードされた配列が作成されます

于 2012-08-31T22:20:31.807 に答える
0

かなりハックな解決策を見つけました：

コレクションを別のモデルでラップします。

define(function(require) {
    var Backbone = require('backbone'),
        m = require('../models/model');

    var wrapper = Backbone.Model.extend({
        initialize: function() {
            var $_path = this.get('path');

            var c = Backbone.Collection.extend({
                model: m,

                url: $_path,

                initialize: function() {
                    this.deferred = this.fetch();
                }
            });

            this.set({
                collection: new c()
            });
        }
    });

    return wrapper;
});

次に、キャッシュコンテナを定義します。

define(function(require) {
    return cache = {};
});

ビューモジュールにキャッシュコンテナとラップされたコレクションの両方が必要です。

define(function(require) {
    var $ = require('jquery'),
        _ = require('underscore'),
        Backbone = require('backbone'),
        cache = require(cache),
        wrapper = require('../collections/collection');

    var v = Backbone.View.extend({
        render: function($_path) {
            var c = cache[$_path] || cache[$_path] = new wrapper({
                path: $_path
            }).get('collection'));
        } 
        ....
    });

    return v;
});

このようにして、動的に生成された値を使用して新しいコレクションをインスタンス化する$_pathことと、ページが更新されない限りAPIからフェッチされたデータをキャッシュできることの両方の利点を得ることができlocalStorageます。ページの更新を通じてデータを保持する場合は、実装してください。

于 2012-09-03T04:03:56.413 に答える