この小さなBackBoneアプリは正しいですか？私は規則を正しく使っていますか？

Question

これは私の単純なバックボーンアプリです。私は勉強しています。 （それはcoffeescriptで書かれています）

私はページ（1-1,2-1,1-2,2-2など）のx-yグリッドを持っています。ページが読み込まれ、これらの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は、あなたのページのコレクション

pagesCollection = new Pages() 

appView = new AppView(
    collection: pagesCollection 
) 

を指し、再生回数