2011-11-19 60 views
0

我想做一个快速示例Backbone.js应用程序,它有Post模型,PostList集合和PostView + PostListView。一些简单的地方,你可以在表单中发帖,它会将你的帖子添加到帖子列表中。Backbone.js - 代码来创建一个新的职位去哪里去?

当有人点击提交表单后,它会在“PostListView”中触发一个事件,这是PostList集合的视图。我在哪里创建一个新的后期模型并将其添加到集合?我是否在View中编写这段代码?或者视图调用这样做的收集方法?你甚至可以编写自定义收集方法吗?如果是这样,我如何从视图中调用它们?我自然倾向于将代码放入集合/模型而不是视图(rails controllers),但我无法弄清楚如何从视图调用自定义集合事件。

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

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 

回答

1

你调用一个方法PostList,从PostListView,集合中添加一个新的模式。像这样的常规js:

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

我不这样做的CoffeeScript所以我想语法学历,计算机会是这样的:

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

如果是更复杂的添加新的PostPostList,你可以添加一个方法,它在PostList

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

您可以在创建类的地方向PostList添加自定义方法..您已经使用newPost方法完成了此操作。

由于视图是最后初始化的,因此这比您收集视图事件的集合要简单得多。

编辑:我猜这也可能归结为意见,有些人喜欢知道哪些骨干视图正在使用它们的模型/集合,但是在一个模型有多个视图的情况下(例如TabContent视图和TabSelector视图为单个TabModel),它会使事情更复杂。

1

以下技巧可以帮助你......

  1. 也许不同的东西更好,如果你有NewPost,其单一的职责是管理的新形式后一个单独的视图。您的PostListView可以创建并将其附加到自身。

  2. 通常情况下,您不想在保存之前将新模型添加到集合中。所以你可能要做的是给你的NewPostForm一个对集合的引用,并在保存后添加它。

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

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

+0

感谢所有三个提示!很有用!清理了很多。 在服务器上保存记录后是否触发了一个事件我可以将添加到集合的代码绑定到? – hurshagrawal

+0

默认情况下没有。虽然在我的应用程序中,我总是添加这个。您可以在成功回调中调用add,或者在成功回调中触发一个事件,这会导致其他操作进行添加。 – maxl0rd