0

我正在尝试拥有一个可以具有可互换模板的视图。因此，单击其中一个复选框会重新呈现视图。这实际上正在发生。但是在视图重新渲染并正确显示新模板后，我失去了上下文并且所有单击绑定到该视图不再起作用。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

@render是的，对in的调用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()
于 2013-02-05T17:46:07.050 回答
0

对@delegateEvents 的调用并没有起到作用。但感谢您为我指明了正确的方向。这也很有帮助。Backbone：重新渲染中丢失的事件

注意我的错误缩进

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 回答