/ / Backbone.js - para onde vai o código para criar uma nova postagem? - backbone.js, coffeescript, eventos de backbone

Backbone.js - para onde vai o código para criar uma nova postagem? - backbone.js, coffeescript, backbone-events

Estou tentando fazer um backbone de amostra rápido.Aplicativo js que possui um modelo Post, uma coleção PostList e um PostView + PostListView. Algo simples onde você pode postar em um formulário e isso adicionará sua postagem à lista de postagens.

Quando alguém clica em enviar no formulário de postagem,dispara um evento em "PostListView", a exibição da coleção PostList. Onde posso criar um novo modelo de postagem e adicioná-lo à coleção? Devo escrever esse código no próprio modo de exibição? Ou o modo de exibição chama um método de coleta que faz isso? Você consegue escrever métodos de coleta personalizados? Em caso afirmativo, como faço para chamá-los de uma visualização?

Vindo de um background Rails, eu naturalmente faço a diferençano sentido de colocar código nas coleções / modelos em vez de visualizações (controladores de rails), mas não consigo descobrir como chamar eventos de coleção personalizados a partir de visualizações.

O código é o seguinte. Muito obrigado por qualquer ajuda!

PostListView.coffee:

class forum.PostListView extends Backbone.View
tagName: "section"
className: "post-list"

events:
"click .post-form button": "submit"

initialize: ->
#causes the view to render whenever the collection"s data is loaded
@collection.bind "reset", @render
@collection.bind "add", @render

render: =>
$(@el).html JST["postList"]()
$postList = this.$(".post-list")

#iterates through posts, renders, appends to <ul>
@collection.each (post) =>
view = new forum.PostView
model: post
collection: @collection
$postList.append view.render().el

return this

submit: ->
console.log "submitted!"
@collection.trigger "newPost", this.$(".post-form textarea").val()

PostList.coffee:

class forum.PostList extends Backbone.Collection
model: forum.Post
url: "/posts"

initialize: ->
this.bind "newPost", newPost

newPost: (postText) ->
console.log "Collection method called!!"
# post = new forum.Post
#   content: postText

# @add post

Respostas:

1 para resposta № 1

Você chama um método em PostList, de PostListView, para adicionar um novo modelo à coleção. Algo assim no js regular:

this.collection.add( new forum.Post( this.$( ".post-form textarea").val() ) );

Eu não faço CoffeeScript, então acho que a sintaxe acima no cs seria assim:

@collection.add new forum.Post
this.$( ".post-form textarea").val()

Se for mais complicado adicionar um novo Post para PostList, você pode adicionar um método para ele em PostList

this.collection.complexAdd( params... );

Você adiciona métodos personalizados para PostList no local onde você cria a classe .. você fez isso com o newPost método já.

Isso é muito mais simples do que sua coleção ouvindo eventos de exibição porque as exibições são inicializadas por último.

Editar:Eu acho que também pode ser uma questão de opinião, algumas pessoas preferem modelos / coleções sabendo sobre quais visualizações de backbone estão usando, mas em uma situação onde há mais de uma visualização para um modelo (por exemplo, visualização TabContent e visualização TabSelector para um único TabModel), torna as coisas mais complicadas.


1 para resposta № 2

As dicas a seguir podem ajudá-lo ...

  1. Pode separar as coisas melhor se você tiver uma visão separada para NewPost, cuja única responsabilidade é gerenciar o novo formulário de postagem. Seu PostListView pode criar isso e anexá-lo a si mesmo.

  2. Normalmente, você não deseja adicionar um novo modelo a uma coleção antes de salvá-lo. Portanto, o que você pode fazer é fornecer ao seu NewPostForm uma referência à coleção e fazer com que ele seja adicionado assim que for salvo.

  3. Você também pode querer que o PostList despeje e recrie a visualização NewPost depois disso, e prepare-o para adicionar uma postagem subsequente.

As "visualizações" de backbone às vezes são mais como ações de controlador em Rails. Portanto, criar modelos, movê-los, salvá-los etc. está tudo perfeitamente ok para fazer no código de visualização.