這個小的BackBone應用程序是否正確？我是否正確使用約定？

Question

這是我簡單的Backbone應用程序，我正在學習。 （這是用咖啡寫的）

這個想法是，我有一個x-y網格的網頁（1-1,2-1,1-2,2-2等）。該頁面加載並使用這些ID實例化一個集合。當用戶瀏覽（此時只有左右）時，模型會從服務器中加載完整的模型，包括要顯示的一些HTML。

它包含模型，集合和視圖，但我敢打賭，我在錯誤的地方做事！請讓我知道什麼是錯的。

Page = Backbone.Model.extend 

    displayHTML: (model, response) -> 
    $("#content").html(model.get('html')) 


Pages = Backbone.Collection.extend 
    model: Page 
    url: "/pages" 
    current_page: '1-1' 

    initialize: (models, options) -> 
    this.fetch(success: this.displayFirst) 

    displayFirst: (collection, response) -> 
    model = collection.get(collection.current_page) 
    model.fetch(success: model.displayHTML) 

    nextPage: -> 
    id = "#{new Number(this.current_page[2]) + 1}-1" #todo - this will break with 9+ 
    this.gotoPage(id) 

    previousPage: -> 
    id = "#{new Number(this.current_page[2]) - 1}-1" #todo - this will break with 9+ 
    this.gotoPage(id) 

    gotoPage: (id) -> 
    this.current_page = id 
    if model = this.get(id) 
     model.fetch(success: model.displayHTML) 
    else 
     alert("Eh nooo") 

AppView = Backbone.View.extend 
    el: $('body') 

    events: 
    "click #next-page": "nextPage" 
    "click #previous-page": "previousPage" 

    initialize: -> 
    this.pages = new Pages(null, {view:this}) 

    nextPage: -> this.pages.nextPage() 
    previousPage: -> this.pages.previousPage() 


appView = new AppView 

Answer 1

如果它的工作像你想讓它那麼它是正確的:)，但也有一些變化，你可以利用某些功能的CoffeeScript +骨幹一起給你。

首先是聲明一個類，你可以用這種方式寫出來更簡潔。

class Pages extends Backbone.Collection 

將生成正確的JavaScript。

您可以進行的另一項更改是將this.的所有實例替換爲@。你會從輸入5個字符到只輸入1個。

這是對這些更改發佈內容的重寫。希望我沒有錯過任何東西。

class Page extends Backbone.Model 
    displayHTML: (model, response) -> 
    $("#content").html(model.get('html')) 


class Pages extends Backbone.Collection 
    model: Page 
    url: "/pages" 
    current_page: '1-1' 

    initialize: (models, options) -> 
    @fetch(success: @displayFirst) 

    displayFirst: (collection, response) -> 
    model = collection.get(collection.current_page) 
    model.fetch(success: model.displayHTML) 

    nextPage: -> 
    id = "#{new Number(@current_page[2]) + 1}-1" #todo - this will break with 9+ 
    @gotoPage(id) 

    previousPage: -> 
    id = "#{new Number(@current_page[2]) - 1}-1" #todo - this will break with 9+ 
    @gotoPage(id) 

    gotoPage: (id) -> 
    @current_page = id 
    if model = @get(id) 
     model.fetch(success: model.displayHTML) 
    else 
     alert("Eh nooo") 

class AppView extends Backbone.View 
    el: $('body') 

    events: 
    "click #next-page": "nextPage" 
    "click #previous-page": "previousPage" 

    initialize: -> 
    @pages = new Pages(null, {view:@}) 

    nextPage: -> @pages.nextPage() 
    previousPage: -> @pages.previousPage() 


appView = new AppView 

Answer 2

正如您所提到的，您可以使用視圖來更改html。

而new Pages()不應該在initialize方法中調用。 我更喜歡這種方式： 類APPVIEW擴展Backbone.View 渲染：（） - > @collection＃@collection是指您Pages集合

pagesCollection = new Pages() 

appView = new AppView(
    collection: pagesCollection 
) 

因爲我覺得模型，集合不應該知道的觀點。