javascript - Backbone - 当用户通过特定帖子访问网站时如何管理集合初始化？

Question

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

主页显示一个 wallView，其中包含一个 albumsCollection 的每个元素的 albumCoverView。当用户点击 albumCoverView 时，他导航到相应的帖子 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;

});

在这里，我的modules/albums/collection.js 文件的代码

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;

});

幻灯片转换由将要显示的 View 的 .show() 函数管理。

我的问题:

当用户在主页上时，我正在获取 WordPress 帖子(使用 JSON API 插件)并将它们缓存在 localStorage 中(使用 backbone-fetch-cache)。

使用此方法，问题是:当用户通过指向特定帖子的链接访问网站时，albumsCollection 未定义，因此应用程序无法找到相应的相册数据(var albumModel = app .albumsCollection.findWhere( { post_name: slug } );).那么，我想知道如何解决这个问题？

• 我是否需要使用此方法引导 albumsCollection:Loading Bootstrapped Models ？
• 我是否需要在路由器初始化时获取 albumsCollection 并使用 $.when(...).then(...);在每条路线上？
• 我是否需要在我的 json Controller 中创建一个 get_album 方法以仅获取一张专辑，然后重置 albumsCollection 以在用户转到主页时重新填充？

我们欢迎任何建议。

Answer 1

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

我的解决方案非常简单:每当您需要共享集合/模型时，检查它是否已加载，如果未加载则获取它。并且，在确保它已加载后，继续进行任何你想用它做的事情。

要保留共享模型/集合，请创建存储，您可以在其中保留这些对象以备不时之需。在这种情况下，我的 store 是我的“静态”_instance 变量。

如果您担心内存泄漏，我建议您对 stores 中的每个对象使用一个计数，这样您就可以获得零计数模型/集合。

例如:

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;

     }    

});

因此，在您的路由器/ View 中:

function ... () {

     var collection = AlbumsCollection.getInstance();

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

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

          collection.fetch();

     }
} 

您只需在 onAlbumsLoaded 函数中对您的收藏做您必须做的事情。

希望我帮到了你。