我正在尝试使用Javascript，Requirejs和Backbonejs创建Wordpress主题。整个主题基于每条路线之间的幻灯片转换。
主页显示一个wallView，其中包含albumsCollection的每个元素的albumCoverView。当用户点击albumCoverView时，他会导航到相应的帖子网址（触发相册路线），并在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;
}）;
幻灯片切换由将显示的视图的.show（）函数管理。
当用户在主页上时，我正在获取WordPress帖子（使用JSON API插件）并在localStorage中缓存它们（使用backbone-fetch-cache）。
使用此方法时，问题是：当用户通过指向特定帖子的链接访问网站时，albumsCollection未定义，因此，应用程序无法找到相应的相册数据（var albumModel = app.albumsCollection.findWhere( { post_name: slug } );）。那么，我想知道如何解决这个问题？
欢迎任何建议。
答案 0 :(得分：0)
我在过去几个月里一直在开发一个大型的javascript应用程序，而且你遇到了一个常见的问题。
我的解决方案非常简单：无论何时需要共享集合/模型，请检查它是否已加载，如果未加载则获取它。并且，在确保加载后，继续执行您想要使用的任何操作。
要保留共享模型/集合，请创建stores，以便在需要时保留这些对象。在这种情况下，我的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;
}
});
所以，在您的路由器/视图中：
function ... () {
var collection = AlbumsCollection.getInstance();
if (collection.loaded)
this.onAlbumsLoaded(collection);
else {
this.listenToOnce('loaded', this.onAlbumsLoaded);
collection.fetch();
}
}
您只需在onAlbumsLoaded函数中执行与集合相关的操作。
希望我帮助过。