Display a view using an existing rendered HTML with Backbone Marionette

问题

I am having an application layout like the one attached. The upper panel is already to the page (i.e. in the server's HTML response). While the user interacts with the elements in that panel the content of the dynamic panel below changes accordingly.

I've studied Backbone Marionette various View types and Region Manager. But I still can't figure out a way to implement this. I need to capture events from the already rendered elements and change the dynamic content accordingly. As I understand, every time a region is created to show a specific Marionette view, the region's content is replaced by that view's el. And with that I cannot have a Layout view for the container of the whole thing.

So can this be done in anyway using Marionette?

回答1:

You can certainly support what I would call a "pre rendered" or partial view. In fact, here's a Marionette View that I use quite a bit, as I'm working under with an app that includes server side partial views:

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

It's simple 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();

回答2:

I think the better way is using constructor. Make your rendered layout 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 use full of Marionette capabilities.

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

});

来源：https://stackoverflow.com/questions/14629207/display-a-view-using-an-existing-rendered-html-with-backbone-marionette

标签

backbone.js

marionette

backbone-views