Switching from a region to another in Marionette, views are not rendered correctly

问题

I'm working with Marionette and I have the following problem.

I've created a layout with two different regions. On initialize the layout loads two views in two regions of my layout. Say ViewA and ViewB. Within ViewA an event is triggered. The event is consumed by the layout to switch and other two views are injected. Say ViewC and ViewD. Whenever the switching is performed, ViewC and ViewD do not have the same style (also the css) that I applied to them. In particular, jQuery Mobile styles are not applied. Any advice?

Here some code where comments highlight the important parts.

onConfirm : function() {        
        this.leftView =  new ViewC();
        this.rightView = new ViewD();

        this.leftRegion.show(this.leftView);                                                                        
        this.rightRegion.show(this.rightView);

        // FIX calling trigger('create') seems fix the problem. Why? Is this correct?
        this.$el.trigger('create');
    },

initialize : function() {
        // listen for event triggered from ViewA
        // e.g. GloabalAggregator.vent.trigger("ga:confirm");
        // where "ga:confirm" is a simple string
        GloabalAggregator.vent.on("ga:confirm" , this.onConfirm, this);  

        this.leftView =  new ViewA(), // creating here a new ViewC the style is applied correctly
        this.rightView = new ViewB(); // creating here a new ViewD the style is applied correctly
    },

onRender : function () {
        this.leftRegion.show(this.leftView);                                                                        
        this.rightRegion.show(this.rightView);
    }

EDIT

Calling trigger('create') seems fix the problem. Why? Is this correct?

回答1:

When you add new html to page (add new rendered view, swap view for some other view, etc..), you have to let jQuery mobile know about this.

"create" event is used to enhance "raw" html with jQuery Mobile widgets. More info can be found here: http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html Look for "Enhancing new markup" section.

来源：https://stackoverflow.com/questions/17976750/switching-from-a-region-to-another-in-marionette-views-are-not-rendered-correct

标签

javascript

backbone.js

marionette