2011-11-19 1 views
0

私は、ポストモデル、PostListコレクション、PostView + PostListViewを持つ簡単なサンプルのBackbone.jsアプリケーションを作ろうとしています。あなたがフォームに投稿できる場所は簡単で、あなたの投稿を投稿のリストに追加します。Backbone.js - 新しい投稿を作成するコードはどこに行きますか?

投稿フォームで投稿をクリックすると、PostListコレクションのビューである「PostListView」でイベントがトリガーされます。新しい投稿モデルを作成してコレクションに追加するにはどうすればよいですか?私はこのコードをView自体に書いていますか?または、ビューはこれを行うコレクションメソッドを呼び出しますか?カスタムコレクションメソッドを記述することはできますか?もしそうなら、どのように私はそれらをビューから呼び出すことができますか?

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:あなたは、コレクションに新モデルを追加し、PostListViewから、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 

答えて

1

。普通のjsのようなもの:

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

私は上記のCSでの構文は次のようになると思いますので、CoffeeScriptのをしない:

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

それはPostListに新しいPostを追加するために、より複雑だ場合、あなたはそれのためのメソッドを追加することができますin PostList

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

PostListにクラスを作成する場所にカスタムメソッドを追加しました。すでにnewPostメソッドでカスタムメソッドを追加しています。

これは、ビューが最後に初期化されるため、ビューイベントをリッスンするコレクションよりもはるかに簡単です。

編集:私は、それはまたの意見に降りてくることができると思い、何人かの人々は、バックボーン・ビューがそれらを使用しているかについて知っモデル/コレクションを好むが、例えば一つのモデル(、TabContentのための複数のビューがある状況で単一のTabModelのTabSelectorビュー)を使用すると、作業がより複雑になります。

1

次のヒントは、あなたが、単一の責任新しい投稿フォームを管理することであるNewPost、用に別のビューを持っている場合、それはより良いものを分けるかもしれない

  1. ...あなたを助けるかもしれません。あなたのPostListViewはそれを作成してそれ自身に追加することができます。

  2. 通常、コレクションを保存するまでコレクションに新しいモデルを追加する必要はありません。ですから、あなたのNewPostFormにコレクションへの参照を与えて、それを保存したらそれを追加することができます。

  3. また、PostListがその後にNewPostビューをダンプして再作成し、後続の投稿を追加できるようにすることもできます。

バックボーンの「ビュー」は、Railsのコントローラアクションによく似ています。モデルの作成、移動、保存などは、すべてビューコードで行うのが大丈夫です。

+0

3つのヒントをお寄せいただきありがとうございます。非常に便利!たくさん消えた。 サーバーにレコードを保存した後にイベントがトリガーされますか?コレクションにコードを追加することができますか? – hurshagrawal

+0

デフォルトではありません。私のアプリケーションでは、私はいつもこれを追加します。 successコールバックでaddを呼び出すか、successコールバックで別の何かがaddを行うイベントをトリガーすることができます。 – maxl0rd

関連する問題