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

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

如果您必须重新渲染视图（就像您要更改模板一样），那么您只需要在@delegateEvents @render电话下方的change_list_view下面添加一个# 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()来电。

<强>更新

如果你想切换到子视图方法，你可能可以摆脱第二次渲染渲染。像这样：

{{1}}

Answer 2

对@delegateEvents的调用没有办法解决问题。但是感谢你指点我正确的方向。这也很有帮助。 Backbone: event lost in re-render

请注意我的错误缩进

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

卓别林在模板重新渲染后没有上下文

2 个答案: