0

マリオネットは素晴らしいですが、従うと少し混乱することがあります。最初のページ読み込みで、Marionette.Application の領域に Marionette.Layout を表示します。しかし、何らかの理由でクリック イベントは委任されていますが、実際には応答していません。別のルートに移動して (レイアウト ビューを削除)、ルートに戻ると (ビューを再レンダリング)、イベントがアクティブになります。ビューを 2 回続けてレンダリングすると、うまくいきます。このシステムの初期化が間違っているのかもしれません。

var     ListView =  Backbone.Marionette.Layout.extend({
    el: "#listView", // exists on DOM already
    events: {
        // this is what is supposed to work
        // as well as events in my subviews
        "click" : function() { console.log("clicked");}
    });


var Router = Backbone.Router.extend({

    initialize: function(options) {
        this.app = options.app;
    },
    start: function(page) {
        console.log("start...");
        // with silent false this causes list() to be called
        // and the view is rendered
        // but the ListView does not get its events delegated
        Backbone.history.start({
            pushState:  false,
            silent:     false
        });

        // only by running loadUrl here
        // do I get the events delegated
        // or by switching between other routes
        // and coming back to 'list'

        // but this is causing a second useless calling
        // of list() re-rendering
        console.log("loadUrl...");
        Backbone.history.loadUrl(page);
        // actually the events are not yet delegated at this point
        // if I pause a debugger here.
        // events only active after the  Application finishes its initializers
    },  
    routes: {
        'list': 'list'
    },
    list: function() {
        var lv = ListView({});
        this.app.focus.show(lv)
    }
});

var app = new Backbone.Marionette.Application();

app.addInitializer(function(options) {
    this.router = new Router({app: this});
    this.router.start();
});

app.addRegions({
    // #focus does exist on the DOM
  focus: "#focus",
});

app.start({});

うまくいくと思っていた別のスタートですが、残念ながらうまくいきません

    start: function(page) {
        console.log("start...");
        Backbone.history.start({
            pushState:  false,
            silent:     true // don't trigger the router
        });

        // call the router here via history
        console.log("loadUrl...");
        Backbone.history.loadUrl(page);
        // causes page to be rendered correctly 
        // but events are not delegated
    },

デバッガーを使用してすべての手順を実行しましたが、loadUrl の魔法の効果がどのようなものであるかはまだわかりません。

また、レイアウトをリージョンに再挿入することも試みました。 

app.focus.show(app.focus.currentView)

おそらく、この問題に遭遇しない、これを構造化する別の方法があるでしょう。

4

2 に答える 2

0

これが答えであると100％確信できるわけではありませんが...

要素が DOM に既に存在し、それらにビューをアタッチしようとしている場合、リージョンのattachメソッドを使用して、そのビューをリージョンにアタッチします。


list: function() {
  var lv = ListView({});
  this.app.focus.attach(lv)
}

このattachメソッドは、既存の DOM 要素を使用する状況に合わせて特別に作成されました。代わりに呼び出すshowと、そこにあるものが置き換えられ、jQuery イベントが解放される可能性があります。

于 2012-09-28T03:37:38.883 に答える