我正在尝试使用 Javascript、Requirejs 和 Backbonejs 创建一个 Wordpress 主题。整个主题基于每条路线之间的幻灯片过渡。
主页显示一个wallView，其中包含一个albumCoverView，用于albumsCollection 的每个元素。当用户点击一个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;
});
在这里，我的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 中（使用骨干提取缓存）。
使用这种方法，问题是：当用户通过指向特定帖子的链接访问网站时，albumsCollection 未定义，因此应用程序无法找到相应的相册数据（var albumModel = app.albumsCollection.findWhere( { post_name: slug } );）。所以，我想知道如何解决这个问题？
- 我是否需要使用以下方法引导专辑集合：加载引导模型？
- 我是否需要在路由器初始化时获取 AlbumsCollection 并使用 $.when(...).then(...); 在每条路线上？
- 我是否需要在我的 json 控制器中创建一个 get_album 方法以仅获取一个专辑，然后在用户转到主页时重置 AlbumsCollection 以重新填充？
欢迎任何建议。