0

在Marionette 文档中CompositeView，它描述appendHTML了itemView使用 jQuery 的append.

使用类似的思路，如果我有两个ItemView对象， aParent和 a Child，并且Parent's 模板有一个空目标<div class="target"></div>，我想在Child其中注入 's 模板。html我可以使用带有onRenderin的 jQueryParent来执行此操作。

在 的整个Parent生命过程中，我都想将 的内容清除或替换为其他内容.target。如果我稍后想重新渲染（因为它可能会根据第一次渲染后的用户交互以不同方式渲染它的模板）Child，我可以使用相同的逻辑：.target

  1. 渲染Child模板
  2. 使用 jQuery将.target's 的内容设置为Child'selhtml

问题是，一旦Child发生第二次渲染，视图中的任何事件Child似乎都丢失了。

这是我所描述的具体示例：

的HTML

<script type="template" id="parent">
  <p><a class="re-render" href="javascript://">Re-Render</a></p>

  <div class="target"></div>
</script>

<script type="template" id="child">
    <p><a href="javascript://">The Link</a></p>    
</script>

<div id="main"></div>

Javascript

var Views = {};

Views.Child = Backbone.Marionette.ItemView.extend({
    template: '#child',

    events: {
      'click a': 'changeBg'
    },

    changeBg: function() {
       this.$el.css('background-color', '#'+Math.floor(Math.random()*16777215).toString(16)); 
    }
});

Views.Parent = Backbone.Marionette.ItemView.extend({
    template: '#parent',

    childView: undefined,

    ui: {
      target: '.target'
    },

    events: {
      'click .re-render': 'onRender'
    },

    initialize: function() {
      this.childView = new Views.Child();  
    },

    onRender: function() {
      this.childView.render();
      this.ui.target.html(this.childView.el);
      this.childView.$el.css('background-color', 'transparent');
    }
});


var App = new Backbone.Marionette.Application();
App.addRegions({
  mainRegion: "#main"
})


App.mainRegion.show(new Views.Parent());

一开始点击链接Child效果很好。一旦在 中单击Re-RenderParent，则Child单击事件永远不会重新应用于Child的模板的新呈现版本。如何确保Child每次Child呈现模板的事件时都会重新应用？

你可以在这里找到一个 jsFiddle 。

4

1 回答 1

1

您应该.delegateEvents()在重新渲染后调用子视图：

onRender: function() {
  this.childView.render();
  this.ui.target.html(this.childView.el);
  this.childView.delegateEvents();
  this.childView.$el.css('background-color', 'transparent');
}

这就是在原版 Backbone 中解决它的方法。我不知道 Backbone.Marionette 是否有另一种处理问题的方法，但在 Marionette 术语中，您可以将delegateEvents调用添加到子视图的onRender方法以封装可重新渲染性。

Views.Child = Backbone.Marionette.ItemView.extend({
    //...
    onRender: function() {
        this.delegateEvents();
    }
});
于 2013-01-02T14:24:17.823 回答