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

【问题标题】：Backbone.js - where does code to create a new post go?Backbone.js - 创建新帖子的代码在哪里？
【发布时间】：2012-01-02 00:57:54
【问题描述】：

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

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

来自 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

【问题讨论】：

标签： backbone.js coffeescript backbone-events

【解决方案1】：

以下提示可能会对您有所帮助...

如果您对 NewPost 有一个单独的视图，它可能会更好地分离事物，它的唯一职责是管理新的帖子表单。您的 PostListView 可以创建它并将其附加到自身。
通常，在保存新模型之前，您不希望将新模型添加到集合中。所以你可以做的是给你的 NewPostForm 一个集合的引用，并让它在保存后添加它。
您可能还希望 PostList 在此之后转储并重新创建 NewPost 视图，并准备好添加后续帖子。

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

【讨论】：

感谢所有三个提示！很有用！清理了很多。在服务器上保存记录后是否触发了事件，我可以将添加到集合代码挂钩到？
默认没有。虽然在我的应用程序中，我总是添加这个。您可以在成功回调中调用 add，或在成功回调中触发一个事件，从而导致其他操作执行 add。

【解决方案2】：

您从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 视图和单个 TabModel 的 TabSelector 视图），它使事情变得更加复杂。

【讨论】：