Question

这是我简单的Backbone应用程序，我正在学习。（它是用coffeescript写的）

我的想法是，我有一个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 + Backbone为你提供的某些功能进行一些更改。

第一个是声明一个类，你可以用这种方式写它来更简洁。

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。

并且不应在initialize方法中调用new Pages()。我更喜欢这种方式： AppView扩展了Backbone.View 渲染:(） - ＆gt; @collection＃@ collection指的是你的Pages集合

pagesCollection = new Pages()

appView = new AppView(
    collection: pagesCollection
)

因为我认为模特，收藏品不应该知道这些观点。

这个小BackBone应用程序是否正确？我是否正确使用这些惯例？

2 个答案: