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

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

提前多多感谢！

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;
});

然后在您的modules / Collections中，只需导入该文件，就像使用其他库一样：

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

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

Backbone共享集合

2 个答案: