0

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

当有人在 post 表单上单击提交时，它会在 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
4

2 回答 2

1

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），它使事情变得更加复杂。

于 2011-11-19T19:40:46.213 回答
1

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

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

  2. 通常，您不希望在保存之前将新模型添加到集合中。所以你可以做的是给你的 NewPostForm 一个对集合的引用，并让它在保存后添加它。

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

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

于 2011-11-19T22:18:24.840 回答