3

私はバックボーンから始めて、最近質問に出くわしました。私が取り組んでいるサンプル アプリケーションは、ある種のプレイリストです。モデルの「曲」と、いくつかの曲を含むコレクションの「プレイリスト」があります。

プレイリスト コレクションのデータは、複数のビューで利用できる必要があります。したがって、私の考えは、グローバルなアプリケーション変数を持つことであり、これらの変数の 1 つがプレイリスト コレクションになる可能性があります。

このようにして、アプリの初期化で曲をフェッチし、アプリのすべてのビューでデータにアクセスできます。

以下は私が現在行っていることです

  define(
        [
            'jQuery',
            'Underscore',
            'Backbone',
            'collections/songlist'
        ],

        function ($, _, Backbone, SonglistCollection)
        {
            var PlaylistView = Backbone.View.extend({

                // properties
                el: '#playlist',
                collection: new SonglistCollection(),

                /**
                 * Initialize
                 */
                initialize: function()
                {
                    // load songs
                    this.collection.on( 'reset' , this.render, this );
                    this.collection.fetch();
                },

                /**
                * Render
                */
                render: function()
                {
                    // loop through the collection and update the view
                },

                ...
            );
        }
);

そしてこれが私のコレクションです

define(
    [
        'Underscore',
        'Backbone',
        'models/song'
    ],

    function (_, Backbone, songModel)
    {

        var songList = Backbone.Collection.extend({

            model: songModel,
            url: 'song'
        });

        return songList;
    }
);

ご覧のとおり、コレクションの新しいインスタンスを作成し、プレイリスト コレクションのデータを使用するすべてのビューのデータを再取得する必要があります。

私はrequire.jsを使用しているため、グローバル変数の作成方法について少し迷っています。私がそれをするのが好きな方法は、例えばです。MyApp.collections.Playlist を作成しますが、これを AMD (require.js) で実現する方法がわかりません。

いくつかのリソースは既に見つけましたが、まだ迷っています / 混乱しています / ...

よろしくお願いします！

4

2 に答える 2

1

ファイルがある場合namespace.js: (あなたの場合は myapp.js)

define([
  // Libraries.
  "jquery",
  "lodash",
  "backbone",

  // Plugins.
  "plugins/backbone.layoutmanager"
],

function($, _, Backbone) {

  // Provide a global location to place configuration settings
  var namespace;

  // ...
  return namespace;
});

次に、モジュール/コレクションで、他のライブラリで行うのと同じ方法で、そのファイルをインポートするだけです:

define([
  "namespace",

  // Libs
  "backbone"
],

function(namespace, Backbone) {


  // This will fetch the tutorial template and render it.
  var Playlist = namespace.collections.Playlist = Backbone.View.extend({
          //...
  });

  // Required, return the module for AMD compliance
  return Playlist;

});

同様に、ルーターを定義できます。そして、別のmain.jsファイルで、アプリが初期化される場所です（ define() の代わりに require() を使用）

クレジット: アプリを構造化するこの方法は、tbranyen BB ボイラープレートで見つけました: https://github.com/tbranyen/backbone-boilerplate/tree/master/app/tree

于 2012-07-04T21:05:54.200 に答える
0

アプリを起動するのと同じファイルでグローバル コレクションを定義しないのはなぜですか?

于 2012-07-01T02:50:08.563 に答える