卓别林在模板重写后没有上下文

Question

我正在尝试一个可以具有可交换模板的视图。因此，单击其中一个复选框会重新显示视图。事实上，这种情况正在发生。但在视图重新绘制并正确显示新模板后，我失去了上下文，所有绑定到该视图的点击都不再工作。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()

有指针吗？

Answer 1

是的，change_list_view中对@render的调用正在清除initialize方法中事件绑定到的元素。

如果必须重新渲染视图（如更改模板），则只需在change_list_view中的@render调用下方添加对@delegateEvents的调用。

更新

如果您想切换到子视图方法，您可能会取消第二次调用以进行渲染。类似这样的东西：

# 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()

Answer 2

对@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()