2013-02-27 46 views
0

我擁有現在正在運行的單頁應用程序的保存功能,在Backbone(一個song.js和songsCollection.js)中使用不同的前端模型和集合,保存到相應的後端模型在Rails(song.rb)中。用戶創建一首歌曲,由節拍和措施等之後.....,主幹線路將用戶帶到包含該歌曲的鏈接,但是,我使用的變量如果看不到在所有歌曲中傳遞頁面開始的開始沒有得到更新。在Rails中使用Backbone更新全局變量

我該如何從主幹(無論是在路徑還是視圖中)調用某種方法或某種方法,從數據庫中重新提取所有歌曲,包括最近創建的歌曲,最好不要更改Rails的Rails側網址(在#hash之前)?

的App.songs變量位於Assets.js.erb內是我很感興趣,從Rails的更新,創建一個新的歌曲之後.....

我不反對使用坤寶石,但如果我這樣做,我怎麼稱它爲更新?

自言自語:

也許在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(骨幹網的路由,而不是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通過寶石 '軌道骨幹' 通過
  • require.js
  • Backbone.js的寶石 'requirejs護欄'
+0

如果我理解你的問題,你只需在成功更新後在集合上執行'fetch'[http://backbonejs.org/#Collection-fetch] – Stevo 2013-02-27 16:17:46

+0

@Stevo這聽起來不錯,我會讓你知道,我會盡快找出使用fetch。謝謝。 – 2013-02-27 16:20:42

+0

在這種情況下,我會將評論移至答案! – Stevo 2013-02-27 16:23:28

回答

1

如果我理解你的問題,你只需需要在成功更新後在集合上執行'fetch'。