0

交換可能なテンプレートを持つことができるビューを作ろうとしています。したがって、チェックボックスの 1 つをクリックすると、ビューが再レンダリングされます。これは実際に起こっています。しかし、ビューが再レンダリングされて新しいテンプレートが正しく表示された後、コンテキストが失われ、このビューにバインドされたすべてのクリックが機能しなくなります。http://pastebin.com/bFJ5Yuer

View = require 'views/base/view'
template = require 'views/templates/list_view_a'

module.exports = class OfferListView extends View
autoRender: true
container: "[data-role='content']"
containerMethod: 'html'
   initialize: ->
    super
    @template = template
    #views
    @delegate 'change', '#list_view_a', @change_list_view
    @delegate 'change', '#list_view_b', @change_list_view
    @delegate 'change', '#list_view_c', @change_list_view
    @delegate 'click',  @click_ev

change_list_view: (event) =>
    console.log('change')
    @template = require 'views/templates/' + event.target.id
    @render()

click_ev: =>
    console.log('click')

getTemplateData: =>
    @collection.toJSON()

ポインタはありますか？

4

2 に答える 2

1

ええ、@renderinの呼び出しchange_list_viewは、メソッド内でイベントがバインドされている要素を一掃していますinitialize。

ビューを再レンダリングする必要がある場合 (テンプレートを変更する場合など)、 の呼び出しの下に への呼び出しを追加するだけ@delegateEventsです。@renderchange_list_view

アップデート

サブビュー メソッドに切り替えたい場合は、おそらくその 2 回目の render 呼び出しを取り除くことができます。このようなもの：

# snipped all the outer require js stuff

class InnerViewBase extends Chaplin.View # Or whatever your base view is
  autoRender: true
  container: "#innerViewContainer"
  containerMethod: "html"

  initialize: (templateName) ->
    @template = require templateName

    super

class ListViewA extends InnerViewBase
  initialize: ->
    super "views/templates/list_view_a"

    # Do any event handlers in here, instead of the outer view
    # @delegate 'click',  @click_ev

class ListViewB extends InnerViewBase
  initialize: ->
    super "views/templates/list_view_b"

class ListViewC extends InnerViewBase
  initialize: ->
    super "views/templates/list_view_b"

class OfferListView extends View
  autoRender: true
  container: "[data-role='content']"
  containerMethod: 'html'

  initialize: ->
    super
    @template = template

    #views
    # Consider changing these three id subscriptions to a class
    @delegate 'change', '#list_view_a', @change_list_view
    @delegate 'change', '#list_view_b', @change_list_view
    @delegate 'change', '#list_view_c', @change_list_view
    @delegate 'click',  @click_ev

  afterRender: ->
    # Add a default ListView here if you want
    # @subview "ListView", new ListViewA

  change_list_view: (event) =>
    console.log('change')

    # Make a hacky looking map to the subview constructors
    viewNames = 
      "list_view_a": ListViewA
      "list_view_b": ListViewB
      "list_view_c": ListViewC

    @subview "ListView", new viewNames[event.target.id]

  click_ev: =>
    console.log('click')

  getTemplateData: =>
    @collection.toJSON()
于 2013-02-05T17:46:07.050 に答える
0

@delegateEvents への呼び出しはうまくいきませんでした。しかし、私を正しい方向に向けてくれてありがとう。これも役に立ちました。バックボーン: 再レンダリングで失われたイベント

私の間違ったインデントに注意してください

View = require 'views/base/view'
template = require 'views/templates/list_view_a'

module.exports = class OfferListView extends View
autoRender: true
container: "[data-role='content']"
containerMethod: 'html'
template: template
initialize: (options) ->
    super        
    #views
change_list_view: (event) =>
    @template = require 'views/templates/' + event.target.id
    @render()

initEvents: =>
    @delegate 'change', '#list_view_a', @change_list_view
    @delegate 'change', '#list_view_b', @change_list_view
    @delegate 'change', '#list_view_c', @change_list_view
    @delegate 'click',  @click_ev
click_ev: ->
    console.log('click')
render: =>
    super

afterRender: =>
    super
    @initEvents()
于 2013-02-05T18:29:57.373 に答える