Backbone.js — куда идет код для создания нового поста?

Я пытаюсь сделать быстрый пример приложения Backbone.js с моделью Post, коллекцией PostList и PostView + PostListView. Что-то простое, где вы можете опубликовать сообщение в форме, и оно добавит ваше сообщение в список сообщений.

Когда кто-то нажимает «Отправить» в форме сообщения, это вызывает событие в «PostListView», представлении для коллекции PostList. Где создать новую модель поста и добавить ее в коллекцию? Я пишу этот код в самом представлении? Или представление вызывает метод коллекции, который делает это? Можете ли вы даже написать собственные методы сбора? Если да, то как мне вызвать их из представления?

Исходя из фона Rails, я, естественно, склоняюсь к размещению кода в коллекциях/моделях, а не в представлениях (контроллеры Rails), но я не могу понять, как вызывать пользовательские события коллекции из представлений.

Код приведен ниже. Большое спасибо за любую помощь!

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

person hurshagrawal    schedule 19.11.2011    source источник


Ответы (2)


Вы вызываете метод в PostList из PostListView, чтобы добавить новую модель в коллекцию. Что-то вроде этого в обычном js:

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

Я не использую CoffeeScript, поэтому я думаю, что синтаксис выше в cs будет таким:

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

Если добавить новый Post в PostList сложнее, вы можете добавить для него метод в PostList

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

Вы добавляете пользовательские методы в PostList в том месте, где вы создаете класс... вы уже сделали это с методом newPost.

Это намного проще, чем ваша коллекция, прослушивающая события просмотра, потому что представления инициализируются последними.

Изменить: я думаю, это также может сводиться к мнению, некоторые люди предпочитают модели/коллекции, зная о том, какие основные представления их используют, но в ситуации, когда для одной модели существует более одного представления (например, представление TabContent и представление TabSelector для одной TabModel), это усложняет задачу.

person Esailija    schedule 19.11.2011

Следующие советы могут помочь вам...

  1. Было бы лучше разделить вещи, если бы у вас было отдельное представление для NewPost, единственной обязанностью которого является управление новой формой публикации. Ваш PostListView может создать это и добавить к себе.

  2. Обычно вы не хотите добавлять новую модель в коллекцию до тех пор, пока она не будет сохранена. Итак, что вы можете сделать, это дать вашей NewPostForm ссылку на коллекцию и добавить ее после ее сохранения.

  3. Вы также можете захотеть, чтобы PostList выгрузил и воссоздал представление NewPost после этого и подготовил его для добавления последующего сообщения.

«Представления» магистрали иногда больше похожи на действия контроллера в Rails. Таким образом, создание моделей, их перемещение, сохранение и т. д. — все это можно делать в коде представления.

person maxl0rd    schedule 19.11.2011
comment
Спасибо за все три совета! Очень полезно! Многое прояснилось. Есть ли событие, вызванное после сохранения записи на сервере, к которому я могу подключить код добавления в коллекцию? - person hurshagrawal; 21.11.2011
comment
По умолчанию нет. Хотя в своих приложениях я всегда добавляю это. Вы можете вызвать добавление в обратном вызове успеха или инициировать событие в обратном вызове успеха, которое заставляет что-то еще выполнить добавление. - person maxl0rd; 21.11.2011