我的单页应用程序的保存功能现在启动并运行,Backbone 中有不同的前端模型和集合(song.js 和songsCollection.js),保存到 Rails 中的适当后端模型(song.rb)。在用户创建一首由节拍和小节等组成的歌曲后......,主干路由将用户带到包含歌曲的 url,但是,我用来传递所有歌曲的 gobal 变量页面开始的开头没有更新。
我如何从主干(在路由或视图中)、方法或其他东西调用从数据库中重新获取所有歌曲,包括最近创建的歌曲,最好不更改 URL 的 Rails 端(在#哈希)?
位于 Assets.js.erb 中的 App.songs 变量是我感兴趣的从 Rails 更新的内容,在创建新歌曲后......
我不反对使用 gon gem,但如果我这样做了,我将如何调用它来更新?
大声思考:
也许在 assests.js.erb 我可以有这个:
App.updateThis = function(appSongs) {
// then an ajax/pjax call to the Rails songs_controller.rb that returns newAllSongs
appSongs = { songs: newAllSongs }
return appSongs; // this would/should update the global variable
}
参考文件:
应用程序.js:
require([
'MYAPPLICATION' // this gets passed in as 'Application'
], function(Application){
Application.initialize(App.songs);
});
MYAPPLICATION.js:
define([
'jquery',
'underscore',
'backbone',
'backbone/routers/router', // Request router.js
], function($, _, Backbone, Router){
var initialize = function(options){
window.router = Router.initialize(options);
}
return {
initialize: initialize
};
});
此文件用于将 AssetsPipeline 路径打包到图像和声音,并在渲染时将它们传递给应用程序,形成要点: https ://gist.github.com/patrickberkeley/3879730
资产.js.erb:
App = {};
App.assets = {
// Returns an object containing all of asset pipeline's image paths.
// This hash is because Rails' Asset Pipeline bundles the routes to files
// per user session, then hands that to the user's session browser, for security.
// So we create in Ruby (erb = embedded ruby) a hash of the images to be accessed
// in the JS.
images: {
<% AssetsUtil.images.each do |img| %>
"<%= img %>" : "<%= asset_path(img) %>",
<% end %>
},
// Return a formatted URL for an asset.
path: function(name) {
// If the file is in our images object, pull the path from there.
if (this.images && this.images[name]) {
return this.images[name];
}
// Otherwise, create a generic asset path.
return '/assets/' + name;
}
};
App.songs = {
songs: <%= Song.all.to_json.html_safe %>
};
routes.js (backbone 的路由,不是 rails 的路由)
define([
.... require.js paths .....
], function($, _, Backbone, mainHomeView, beatSliderView, beatBarsView, componentsView, tempoSliderView, transportView, repButtonView, log, songsCollection, songsViewNew, songsViewIndex, songsViewShow, songsViewEdit){
var AppRouter = Backbone.Router.extend({
songs: {},
routes: {
'new' : 'newSong',
'index' : 'index',
':id/edit' : 'edit',
':id' : 'show',
'.*' : 'newSong'
},
newSong: function(){
var view = new songsViewNew({collection : this.songs});
/// A WHOLE BUNCH OF RENDERING....
},
index: function(){
console.log('bb routes index');
},
show: function(id){
var createdSong = this.songs.get(id);
var view = new songsViewShow(createdSong);
},
edit: function(id){
console.log('bb routes edit');
},
});
// Initialize the Router, with the options, where (options) is declared in MYAPPLCIATION.js
// and called from application.js
//
// (options) == 'assest.js.erb' => App.songs{ songs : <%= Song.all.to_json.html_safe %> }
// (options) == All the songs in the DB
var initialize = function(options){
var app_router = new AppRouter;
app_router.songs = new songsCollection();
app_router.songs.reset(options.songs);
name = '';
$('.component').each( function() {
name = name + $(this).attr('id') + '.';
$(this).children('.measure').each( function() {
name = name + $(this).attr('id') + '.';
$(this).children('.beat').each( function() {
name = name + $(this).attr('id') + '.';
});
});
log.sendLog([[1, "Component structure: "+name]]);
name = '';
});
Backbone.history.start();
return app_router;
};
return {
initialize: initialize
};
});
使用:
- 导轨 3.2.2
- 通过 gem 'rails-backbone' 的主干.js
- require.js 通过 gem 'requirejs-rails'