4

添付のようなアプリケーションレイアウトを使用しています。上部のパネルはすでにページにあります（つまり、サーバーのHTML応答にあります）。ユーザーがそのパネルの要素を操作している間、以下の動的パネルのコンテンツはそれに応じて変化します。

私はバックボーンマリオネットのさまざまなビュータイプとリージョンマネージャーを研究しました。しかし、私はまだこれを実装する方法を理解することはできません。すでにレンダリングされた要素からイベントをキャプチャし、それに応じて動的コンテンツを変更する必要があります。私が理解しているように、特定のマリオネットビューに対してリージョンが作成されるたびshowに、リージョンのコンテンツはそのビューのコンテンツに置き換えられますel。そしてそれで私はLayout全体のコンテナのビューを持つことができません。

それで、これはとにかくマリオネットを使用して行うことができますか？

サンプルレイアウト

4

2 に答える 2

3

あなたは確かに私が「事前にレンダリングされた」または部分的なビューと呼ぶものをサポートすることができます。実際、サーバー側の部分ビューを含むアプリで作業しているので、これが私がかなり使用するマリオネットビューです。

My.PartialView = Backbone.Marionette.Layout.extend({
   render: function () {
      //noop
      if (this.onRender) {
         this.onRender();
      }
      return this;
   },
   onShow: function () {
       // make sure events are ready
       this.delegateEvents();
   }
});

使い方は簡単です。

My.NavBar = My.PartialView.extend({
    events: {
        "change #search-input": "searchRequested",
        "click #faq-link": "faqRequested",
        "click #home-link": "homeRequested",
    },
    searchRequested: function (e) {
        // search
    },
    faqRequested: function (e) {
        // show the faq
    },
    homeRequested:function () {
        // go home
    }
});

var navbar = new main.views.NavBar({ el: ".my-nav" });
someRegion.show();
// or, just wire up the events manually
navbar.delegateEvents();
于 2013-01-31T17:30:07.527 に答える
1

より良い方法はコンストラクターを使用することだと思います。レンダリングされたレイアウト クラスを作成します。

App.RenderedLayout = Marionette.Layout.extend({
    render: function () {
        if (this.onRender) {
            this.onRender();
        }
        return this;
    },
    constructor: function(){
        this._ensureElement();
        this.bindUIElements();
        Marionette.Layout.prototype.constructor.apply(this, slice(arguments));
    }
});

その後、マリオネットの機能をフルに使用できます。

App.module('Some.Page', function (Mod, App, Backbone, Marionette, $, _) {

    Mod.SomeLayout = App.RenderedLayout.extend({
        el: '#renderedDiv',
        events: {
            'click .something': 'onSomethingClick'
        },
        regions: {
            'innerRegion': '#innerRegion'
        },
        ui: {
            something: '.something div'
        },
        initialize: function () {

        },
        onSomethingClick: function(e){
            return false;
        }
    });

    Mod.addInitializer(function(){
        App.addRegions({renderedRegion: '#renderedDiv'});
        Mod.someLayout = new Mod.SomeLayout();
        App.renderedRegion.attachView(Mod.someLayout);
    });

});
于 2013-11-07T15:14:47.300 に答える