Question

我的单页应用程序的保存功能现在正在运行，Backbone中有不同的前端模型和集合（song.js和songsCollection.js），保存到Rails中适当的后端模型（song.rb））。在用户创建由节拍和小节等组成的歌曲之后，骨干路线将用户带到包含歌曲的网址，然而，我过去在所有歌曲中传递的golbal变量页面开始的开始没有得到更新。

我如何从骨干（路由或视图），方法或其他东西中调用来从数据库中重新获取所有歌曲，包括最近创建的歌曲，最好不要更改URL的Rails端（在#hash之前）？

在创建新歌后，位于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 
}

参考文件：

的application.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

assets.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（骨干路线，而非铁路路线）

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
  };
});

使用：

rails 3.2.2
backbone.js通过gem'trail-backbone'
require.js通过gem'trustjs-rails'

Answer 1

如果我理解了您的问题，您只需在成功更新后对集合执行“fetch”。

在Rails中使用Backbone更新全局变量

1 个答案: