0

我的单页应用程序的保存功能现在启动并运行，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'
4

1 回答 1

1

If I understand your question, you simply need to perform a 'fetch' on the collection after a successful update.

于 2013-02-27T16:23:38.470 回答