2013-09-26 58 views
0

我想繞過骨幹,更具體地說,一個應用程序如何流經它的生活。不幸的是,在我的工作中,我無法訪問(或針對這個問題)我們API的結構。我們有來自不同時間段的不同呼叫,結構瘋狂不一致。如何管理Backbone應用程序?

覆蓋獲取或同步並不是一個問題來標準化返回,但我遇到的問題(在我的一個Backbone應用程序的開始階段)是如何佈局實際的代碼。

這是我真實世界的例子。這個頁面並不重要,我試圖用Backbone重新編寫它。這裏是流量:

  1. 頁從呼叫
  2. 點擊基於關閉流派類型的曲風類型的負載子流派加載流派類型的列表(子流派類型requres種類代碼作爲參數)
  3. 點擊子流派類型加載具有該條件的所有產品。

我可以得到相當遠的地方,但在某些時候,我覺得代碼越來越受損 - 或者感覺不自然。就像我推着東西一樣。

所以我的官方問題是:如何管理Backbone應用程序?

這裏是我的,雖然過程的摘要:

我創建了一個全局命名空間作爲一個人應該

var App = App || {}; 

好吧,讓我們與主應用程序視圖啓動的所有例子表明:

App.MainView = Backbone.View.extend({ 
    //this loads the outer stuff 
    //and creates an instance of the Genre View 
}); 

好吧很簡單,我將需要一個流派模型,集合和視圖(這也適用於子流派)

App.Genre = Backbone.Model.extend(); 

App.Genres = Backbone.Collection.extend({ 
    url: 'returns a list of genres', 
    model: App.Genre, 
    initialize: function() { 
    this.fetch(); 
    }, 
    fetch: function() { 
    var self = this; 

    $.ajax({ 
     url: this.url, 
     success: function(response) { 
     **format return** 
     self.add(formattedArrayOfModels); 
     } 
    }); 
    } 
}); 

現在上認爲,混亂的部分

App.GenreView = Backbone.View.extend({ 
    el: 'element',//easy enough 
    tmpl: 'my handlebars template',//implementing handlebars...no problem 
    initialize: function() { 
    //this produces a collection full of genres 
    this.genreList = new App.Genres(); 
    this.genreList.on('add', _.bind(this.render, this)); 
    }, 
    render: function() { 
    //rendering not a problem, pretty straight forward 
    } 
}); 

直到我在這裏沒有問題。類型列表加載,我們很高興去。所以,現在當用戶點擊一個流派,我希望它加載子流派

events: { 
    'click a': 'getSubGenres' 
}, 
getSubGenres: function(e) { 

} 

這裏是我的問題。在getSubGenres我是否保持本地?

var subGenre = new App.SubGenreView(); 

或者我應該讓它成爲風格視圖的一部分嗎?

this.subGenre = new App.SubGenreView(); 

我應該以某種方式把它放在一個父對象,以便它可以被其他視圖訪問?我如何控制這樣的事情?

如果我已經有一個子流派的集合,我該如何使用加載的集合(而不是另一個Ajax調用)。

這是您將使用的方法嗎?

回答

1

夫婦的事情,我纔回答, 第一:取功能,因爲這是它的工作並不需要一個$ AJAX調用,因此,您可以評估error:function(){}success:function(){}立即裏面取,但是這假設URL設置正確。 秒:有一件事在我的骨幹鍵盤頭戰中幫了我很大的忙,就是addy osman Backbone Fundamentals,它包含了pdf格式的非常豐富的教程。

現在回到問題:根據我的經驗,您大多需要'this',所以習慣它是一種很好的習慣,如果正確實施,有些東西可以解決很多這些問題:backbone layoutmanager

無論如何,哪裏放置子視圖的決定,完全是您的案例的設計決策,並且取決於您如何構建您的頁面和文件。

關於如何使用預加載的「集合」:我真的沒有得到它,因爲你談論的集合包含所有子類,所以通常它不應該改變,即使視圖改變某種類型的視圖,你仍然可以使用它。

但仍然是我說的一切,相對於你如何構建你的文件,我做了一個app.js和一個router.js以及很多其他文件,但主要工作總是在主要的兩個,所以基本上我總是可以訪問一切。

我希望這能回答你的問題

+0

感謝您的意見。邁向學習MV *框架的另一步。我非常喜歡這樣的想法,即你可以將你的數據從你的html中分離出來,並且希望在未來的每個項目中都能使用這種模式(通過Backbone或其他定製) – traviss0

+0

骨幹網非常棒,它可能有點兒棘手的,但那是因爲它不遵從你做任何你不想做的事情,你可能會喜歡knockout.js,它更容易學習和製作,但它有其侷限性。 –

相關問題