0

Rails 3とbackbone-on-railsgemを使用して Rails アプリを開発しています。

ProductTypes を示すバックボーン ルートがあります。リスト用のバックボーン ビューとフォーム用のビューがあるため、ユーザーは新しい ProductTypes を追加できます。

すべて正常に動作しますが、作成したモデルをフォーム ビューからリスト ビューのコレクションに追加しようとすると、両方のビューを接続する方法がわかりません。

これが私のルートです：

class Newgvbtool.Routers.ProductTypes extends Backbone.Router
  routes:
    'companies/:company_id/product_types': 'index'

  initialize: ->
    @container = $('#product-types-view')
    @company_id = @container.data 'company_id'
    @collection = new Newgvbtool.Collections.ProductTypes([],{ company_id: @company_id })
    @collection.fetch()

  index: (company_id) ->
    view = new Newgvbtool.Views.ProductTypesIndex(collection: @collection)
    @container.append view.render().el

    newModel = new Newgvbtool.Models.ProductType({ company_id: @company_id })
    editView = new  Newgvbtool.Views.ProductTypeEdit model: newModel
    @container.append editView.render().el

彼女は私のモデルです：

class Newgvbtool.Models.ProductType extends Backbone.Model
  initialize: (model)-> 
    @company_id = model.company_id
    @id = model.id
  url: ()->
    "/api/companies/#{@company_id}/product_types/" + (@id || '')

ここに私の見解があります：

# Collection view
class Newgvbtool.Views.ProductTypesIndex extends Backbone.View

  template: JST['product_types/index']

  events: ->

  initialize: ->
    @collection.on 'reset', @render
    @collection.on 'add', @appendItem
    @collection.on 'remove', @removeItem

  render: =>
    $(@el).html @template()
    @collection.each @appendItem
    @

  appendItem: (model)=>
    view = new Newgvbtool.Views.ProductType model: model
    $('#product-types tbody').append(view.render().el)

  removeItem: (model)=>
    $('#product-types tbody').find("tr[data-id=#{model.get('id')}]").remove()


 #Item view
 class Newgvbtool.Views.ProductType extends Backbone.View

  template: JST['product_types/product_type']
  tagName: 'tr'

  events:
    'click .delete-item': 'deleteItem'

  initialize: ->
    @model.on 'highlight', @highlight
    @model.on 'change', @render

  render: =>
    $(@el).attr('data-id', @model.get('id')).html @template( model: @model)
    @

  highlight: =>
    @$('td').effect 'highlight', 1000

  deleteItem: ->
    @model.destroy(
      wait: true
    ) if confirm "Are you sure?"

#Form view
class Newgvbtool.Views.ProductTypeEdit extends Backbone.View

  template: JST['product_types/edit']

  render: =>
    $(@el).html @template( model: @model )
    @

  events: ->
    'submit #product-type-form': 'createProductType'

  createProductType: (e) ->
    e.preventDefault()

    attributes = $(e.currentTarget).serializeForm()['product_type']

    @model.save attributes,
      wait: true
      success: (model)->
        $('#product-type-form')[0].reset()
        model.trigger('highlight')

新しいモデルがフォーム ビューに保存されたときに、実際にそのモデルをメイン コレクションに追加して、追加イベントがトリガーされ、この新しいモデルがコレクションのビューに表示されるようにする方法はありますか?

また、アイテムを更新する場合、逆の操作を行い、リストで選択したモデルをフォームに設定して更新できるようにし、それらの変更をコレクションのビューに反映することはできますか?

事前にどうもありがとうございました！

4

1 に答える 1

0

アプリケーションにイベント アグリゲーターを作成して、ビューでカスタム イベントを簡単にトリガーし、それに反応する別のイベントにリスナーを配置することをお勧めします。

これがどのように機能するかを説明し、それらを実装する方法のいくつかのアイデアを提供する Derick Bailey の投稿へのリンクです。

メイン オブジェクトを使用してアプリケーションをインスタンス化する場合は、次のようにすることができます。

window.App =
 Models: {}
 Collections: {}
 Views: {}
 Routers: {}

 initialize: ->
  @vent = _.extend({}, Backbone.Events)
  # More code here

$(document).ready ->
  App.initialize()

次に、App.ventイベントアグリゲーターになり、次のようなイベントをトリガーできます。

App.vent.trigger "model:add:success", @model

ここで、モデル「@model」を渡して「model:add:success」をトリガーします。次に、次の方法で別の場所でキャッチできます。

initialize: ->
  App.vent.on "model:add:success", @appendModel, this
于 2013-02-25T02:47:36.330 に答える