Display a view using existing rendered HTML with Magionta Trunk

Question

I have a mock application, like the one attached. The top panel is already on the page (i.e. in the HTML server response). While the user interacts with the elements in this panel, the contents of the dynamic panel below change accordingly.

I studied the Trunk Magic Types of various kinds and the Regional Manager. But I still can’t figure out how to implement this. I need to capture events from already processed elements and change the dynamic content accordingly. As far as I understand, every time a region is created before the show certain kind of Marionette, the contents of the region are replaced by this el representation. And with that, I can't have a Layout view for the container of it all.

So can this be done anyway with Marionette?

Answer 1

You can, of course, support what I would call a “pre-rendered” or partial view. Actually, here is a puppet view, which I use very little, since I work with an application that includes partial views on the server side:

 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(); } }); 

Easy to use:

 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(); 

Answer 2

I think the best way is to use a constructor. Create a layout rendering class.

 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)); } }); 

Then you can take full advantage of Marionette.

 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); }); });