Это маленькое приложение BackBone правильно?Я правильно использую соглашения? - PullRequest
Новая
       1

Это маленькое приложение BackBone правильно?Я правильно использую соглашения?

0 голосов
/ 01 февраля 2012

Это мое простое приложение Backbone, я учусь на ходу.(Написано в coffeescript)

Идея в том, что у меня есть xy сетка страниц (1-1, 2-1, 1-2, 2-2 и т. Д.).Страница загружается и создает коллекцию с этими идентификаторами.Когда пользователь перемещается (только влево и вправо в данный момент), модель полностью загружается с сервера, включая некоторый 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

Ответы [ 2 ]

0 голосов
/ 03 февраля 2012

Как вы упомянули, вы можете использовать представление для изменения HTML.

И new Pages() не следует вызывать в методе initialize.Я предпочитаю так: класс AppView расширяет Backbone.View render: () -> @collection # @collection относится к вашей коллекции страниц 

pagesCollection = new Pages()

appView = new AppView(
    collection: pagesCollection
)

Поскольку я считаю, что модели не должны знать коллекции о представлениях.

0 голосов
/ 01 февраля 2012

Если он работает так, как вы хотите, то это правильно :), но есть некоторые изменения, которые вы можете сделать, чтобы воспользоваться преимуществами определенных функций CoffeeScript + Backbone вместе.

Первый - объявление класса, вы можете написать его таким образом, чтобы быть более кратким. 

class Pages extends Backbone.Collection

Будет сгенерирован правильный JavaScript.

Еще одно изменение, которое вы могли быmake должен заменить все экземпляры this. на @.Вы бы набрали от 5 символов до 1. 1. 1010 *

Вот переписывание того, что вы опубликовали с этими изменениями.Надеюсь, я ничего не пропустил. 

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
...