0

バックボーン (song.js と songCollection.js) のさまざまなフロント エンド モデルとコレクションを使用して、シングル ページ アプリケーションの保存機能を実行し、Rails の適切なバックエンド モデル (song.rb) に保存します。ユーザーがビートや小節などで構成された曲を作成した後、バックボーン ルートはユーザーをその曲を含む URL に移動させます。ページの先頭が更新されていません。

バックボーン (ルートまたはビューのいずれか)、メソッドまたは何かから呼び出して、最近作成された曲を含むすべての曲をデータベースから再取得するには、できれば 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 パスを画像とサウンドにパッケージ化し、レンダリング時にアプリケーションに渡すために使用されます 。

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

使用:

  • レール3.2.2
  • gem 'rails-backbone' 経由の backbone.js
  • gem 'requirejs-rails' 経由の require.js
4

1 に答える 1

1

あなたの質問が理解できれば、更新が成功した後、コレクションに対して' fetch ' を実行するだけで済みます。

于 2013-02-27T16:23:38.470 に答える