骨幹共享集合

我以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）實現這一點。

一些資源，我已經發現了，但我還是輸掉/困惑/ ...

非常感謝提前！

來源

2012-06-30 Voles

對你發現的第一個問題的答案都是合理的。設置一個'app_registry'依賴關係來保存你的全局狀態，或者在你初始化的時候用'window.App = {...}'手工完成。 –

如果你有一個文件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文件，是在應用程序中（使用要求（），而不是定義（））

信用初始化： https://github.com/tbranyen/backbone-boilerplate/tree/master/app/tree

：構建我發現它在tbranyen BB樣板應用的這種方式

來源

2012-07-04 21:05:54 corbacho