Javascript 主干网-当用户通过特定帖子访问网站时，如何管理收藏初始化？

我正在尝试使用Javascript、Requirejs和Backbonejs创建Wordpress主题。整个主题基于每条路线之间的幻灯片过渡

主页显示一个wallView，其中包含albumsCollection中每个元素的albumCoverView。当用户单击albumCoverView时，他会导航到相应的post url（启动相册路径），并开始wallView和albumView之间的幻灯片转换

这是我的router.js文件的代码

define( function( require, exports, module ) {

"use strict";

var app     = require( 'app' );
var cache   = require( 'backbone-cache' );
var Albums  = require( 'modules/albums/index' );
var Wall    = require( 'modules/wall/index' );

var Router = Backbone.Router.extend( {

    routes: {
        ''                          : 'index',
        ':year/:month/:day/:slug/'  : 'album'
    },

    index: function() {

        if( typeof app.albumsCollection == "undefined" ) {

            app.albumsCollection = new Albums.Collection();

            app.albumsCollection.fetch( {

                cache: true,

                success: function() {

                    app.wallView = new Wall.View( {

                        collection: app.albumsCollection

                    } );

                    app.wallView.render();

                    app.wallView.show();

                },

                error: function() {

                    console.log( "Collection: modules/albums -> fetch failed" );

                }

            } );

        }

        else app.wallView.show();

    },

    album: function( year, month, day, slug ) {

        var albumModel = app.albumsCollection.findWhere( { post_name: slug } );

        if( albumModel.get( 'format' ) == "gallery" ) {

            app.albumView = new Albums.Views.Gallery( {

                id      : "album-" + albumModel.get( 'ID' ),
                model   : albumModel

            } );

        }

        else if( albumModel.get( 'format' ) == "image" ) {

            app.albumView = new Albums.Views.Image( {

                id      : "album-" + albumModel.get( 'ID' ),
                model   : albumModel

            } );

        }

        app.albumView.render();

        app.albumView.show();

    }

} );

module.exports = Router;

define( function( require, exports, module ) {

"use strict";

var app         = require( 'app' );
var AlbumsModel = require( './model' );

var AlbumsCollection = Backbone.Collection.extend( {

    model   : AlbumsModel,
    url     : app.jsonApi + "albums/get_albums/",

    parse: function( response ) {

        return response.posts;

    }

} );

module.exports = AlbumsCollection;

}）

这里是我的模块/albums/collection.js文件的代码

define( function( require, exports, module ) {

"use strict";

var app     = require( 'app' );
var cache   = require( 'backbone-cache' );
var Albums  = require( 'modules/albums/index' );
var Wall    = require( 'modules/wall/index' );

var Router = Backbone.Router.extend( {

    routes: {
        ''                          : 'index',
        ':year/:month/:day/:slug/'  : 'album'
    },

    index: function() {

        if( typeof app.albumsCollection == "undefined" ) {

            app.albumsCollection = new Albums.Collection();

            app.albumsCollection.fetch( {

                cache: true,

                success: function() {

                    app.wallView = new Wall.View( {

                        collection: app.albumsCollection

                    } );

                    app.wallView.render();

                    app.wallView.show();

                },

                error: function() {

                    console.log( "Collection: modules/albums -> fetch failed" );

                }

            } );

        }

        else app.wallView.show();

    },

    album: function( year, month, day, slug ) {

        var albumModel = app.albumsCollection.findWhere( { post_name: slug } );

        if( albumModel.get( 'format' ) == "gallery" ) {

            app.albumView = new Albums.Views.Gallery( {

                id      : "album-" + albumModel.get( 'ID' ),
                model   : albumModel

            } );

        }

        else if( albumModel.get( 'format' ) == "image" ) {

            app.albumView = new Albums.Views.Image( {

                id      : "album-" + albumModel.get( 'ID' ),
                model   : albumModel

            } );

        }

        app.albumView.render();

        app.albumView.show();

    }

} );

module.exports = Router;

define( function( require, exports, module ) {

"use strict";

var app         = require( 'app' );
var AlbumsModel = require( './model' );

var AlbumsCollection = Backbone.Collection.extend( {

    model   : AlbumsModel,
    url     : app.jsonApi + "albums/get_albums/",

    parse: function( response ) {

        return response.posts;

    }

} );

module.exports = AlbumsCollection;

}）

幻灯片过渡由要显示的视图的.show（）函数管理

我的问题： 我正在获取WordPress帖子（使用JSONAPI插件）并在用户位于主页时将其缓存在localStorage中（使用主干获取缓存）

使用此方法，问题是：当用户通过特定帖子的链接访问网站时，albumsCollection未定义，因此应用程序无法找到相应的相册数据（

var albumModel=app.albumsCollection.findWhere（{post_name:slug}）；

）。那么，我想知道如何解决这个问题

• 是否需要使用以下方法引导albumsCollection:
• 我是否需要在路由器初始化时获取albumsCollection并使用$.when（…）。然后（…）；在每条路线上
• 我是否需要在json控制器中创建一个get_album方法，以便只获取一个相册，然后在用户转到主页时重置相册集合以重新填充

---

欢迎您提供任何建议。

过去几个月我一直在开发一个大型javascript应用程序，您遇到了一个常见问题

我的解决方案非常简单：每当您需要共享集合/模型时，检查它是否已加载，如果未加载则获取它。并且，在确保它已加载后，继续执行您想对其执行的任何操作

要保留共享模型/集合，请创建

存储

，以便在需要时随时保存这些对象。在这种情况下，我的

存储

是我的“静态”

\实例

变量

如果您担心内存泄漏，我建议对

存储区的每个对象使用计数，这样您就可以获得零计数模型/集合

例如：

var AlbumsCollection = Backbone.Collection.extend( {

    model   : AlbumsModel,
    url     : app.jsonApi + "albums/get_albums/",

    initialize: function ( options ) {

        this.loaded = false;

        this.listenToOnce('sync', this.onLoaded);

    },

    onLoaded: function () {

        if (!this.loaded) {

             this.loaded = true;

             this.trigger('loaded', this);

        }

    },   

    parse: function( response ) {

        return response.posts;

    }

 },
 // Static part
 {

     _instance: null,

     getInstance: function () {

         if (!this._instance)
              this._instance = new AlbumsCollection();

         return this._instance;

     }    

});

因此，在您的路由器/视图中：

function ... () {

     var collection = AlbumsCollection.getInstance();

      if (collection.loaded)
          this.onAlbumsLoaded(collection);
      else {

          this.listenToOnce('loaded', this.onAlbumsLoaded);

          collection.fetch();

     }
} 

您只需在
onAlbumsLoaded
函数中处理您的收藏即可

希望我能帮上忙