Backbone.js - 创建新帖子的代码在哪里？

Question

我正在尝试制作一个快速示例 Backbone.js 应用程序，其中包含 Post 模型、PostList 集合和 PostView + PostListView。很简单，您可以在表单中发布，它会将您的帖子添加到帖子列表中。

当有人单击帖子表单上的“提交”时，它会触发“PostListView”（PostList 集合的视图）中的事件。在哪里创建新的帖子模型并将其添加到集合中？我是否在视图本身中编写此代码？或者视图是否调用执行此操作的集合方法？您甚至可以编写自定义收集方法吗？如果是这样，我如何从视图中调用它们？

来自 Rails 背景，我自然倾向于将代码放入集合/模型而不是视图（rails 控制器）中，但我不知道如何从视图调用自定义集合事件。

代码如下。非常感谢您的帮助！

PostListView.咖啡：

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.咖啡：

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

Answer 1

您可以从 PostListView 调用 PostList 中的方法，以在集合中添加新模型。常规 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），它使事情变得更加复杂。

Answer 2

以下提示可能会帮助您...

1. 如果您有一个单独的 NewPost 视图（它的唯一职责是管理新帖子表单），那么它可能会更好地将事情分开。您的 PostListView 可以创建它并将其附加到自身。

2. 通常，您不想在保存新模型之前将其添加到集合中。因此，您可以做的就是为您的 NewPostForm 提供对集合的引用，并在保存后将其添加。

3. 您可能还希望 PostList 之后转储并重新创建 NewPost 视图，并准备好添加后续帖子。

主干“视图”有时更像 Rails 中的控制器操作。因此，创建模型、移动模型、保存模型等都可以在视图代码中完成。