0

のMarionette ドキュメントではCompositeView、jQueryの.appendHTMLitemViewappend

同様の考え方で、 aと aの 2 つのItemViewオブジェクトがあり、のテンプレートに空のターゲットがある場合、のテンプレートを内部に挿入したいと考えます。これを行うには、 jQueryをinと共に使用できます。ParentChildParent<div class="target"></div>ChildhtmlonRenderParent

の生涯を通じて、Parentの内容を洗い流すか、別のものに置き換えたいと考えて.targetいます。Child後で再レンダリングしたい場合.target (最初のレンダリング以降のユーザーの操作に基づいてテンプレートが異なる方法でレンダリングされる可能性があるため)、同じロジックを使用できます。

  1. Childテンプレートをレンダリングする
  2. の.target内容をjQuery でに設定するChildelhtml

問題は、この 2 番目のレンダリング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-RenderがクリックされるとParent、クリック イベントがのテンプレートのChild新しくレンダリングされたバージョンに再適用されることはありません。テンプレートがレンダリングされるたびに、テンプレートのイベントが再適用されるようにするにはどうすればよいですか?ChildChildChild

このための 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.Marionette に問題を処理する別の方法があるかどうかはわかりませんが、Marionette の用語ではdelegateEvents、子ビューのonRenderメソッドへの呼び出しを追加して、再レンダリング可能性をカプセル化できます。

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