javascript - 骨干共享集合

Question

我从 Backbone 开始，最近偶然发现了一个问题。我正在处理的示例应用程序是某种播放列表。我有一个模型“歌曲”和一个集合“播放列表”，其中包含几首歌曲。

播放列表集合的数据应该在多个视图中可用。所以我的想法是拥有全局应用程序变量，其中一个变量可能是播放列表集合。

这样，我可以通过应用程序的初始化来获取歌曲，并在应用程序的每个视图中访问数据。

以下是我目前正在做的事情

  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）实现这一点。

我已经找到了一些资源，但我仍然迷路/困惑/ ...

• 在不同的 AMD 模块之间共享资源
• http://www.alexrothenberg.com/2011/02/11/backbone.js-makes-building-javascript-applications-fun.html

提前非常感谢！

Answer 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文件中，是应用程序初始化的地方（使用 require() 而不是 define() ）

信用：这种构建应用程序的方式我在 tbranyen BB 样板中找到了它： https ://github.com/tbranyen/backbone-boilerplate/tree/master/app/tree

Answer 2

为什么不在启动应用程序的同一个文件中定义全局集合？