Using iframe body as Region in Backbone Marionette

Question

I'm trying to use an iframe's body as a Region in Backbone Marionette. Marionette uses standart jquery selectors to define which element is the region, like this:

App.addRegions( { main: "#main-region" } );

I want my region to be the body of an iframe, which normally I would find like so:

$('iframe').contents().find('body');

When trying to put above as the region, like this:

App.addRegions( { main: $('iframe').contents().find('body') } );

The following error is thrown:

Uncaught Error: Syntax error, unrecognized expression: iframe.contents() body
  Sizzle.error   jquery.js?body=1:4681
  tokenize       jquery.js?body=1:4742
  select         jquery.js?body=1:5114

I tried to put the selector in directly:

App.addRegions( { main: "iframe.contents() body" } );

But it's giving me the exact same error.

EDIT:

Also tried to create a psuedo-selector for it:

$.expr[":"].contents = $.expr.createPseudo(function(selector) {
  return function(el) {
    var $el;
    $el = $(el);
    console.log($el.contents().find(selector));
    return $($el.contents().find(selector));
  };
});

// Usage: $('iframe:contents body');

Which does log the iframe's body in the function itself:

[body, prevObject: jQuery.fn.jQuery.init[1], context: iframe, selector: ".contents() body", constructor: function, init: function…]

But eventually returns the iframe element somehow:

[iframe, prevObject: jQuery.fn.jQuery.init[1], context: document, selector: "iframe:contents(body)", constructor: function, init: function…]

So, what I need, is a selector that is able to get the iframe's body or something else that could work with Marionette.

Is there a way to get this done?

i understand why " App.addRegions( { main: $('iframe').contents().find('body') } );" because the region defined in marionnette must be a string not the object , why you dont add a class or an id into the body of your iframe and refer to it in your backbone code ? is it possible ? — Houssein C Dhayne
I will try, but I don't expect it to work. The problem is that my JS is running in the top window and the region should be the body element in the iframe ($('iframe body')). — Tim Baas
when you instantiate the region, you can provide an el property for it that is a jquery object - does something like that work? — kinakuta
No, that doesn't work, it grabs the selector property of the jQuery object which is iframe.contents() body and throws the error stated above. — Tim Baas

Cubed Eye Cubed Eye · Accepted Answer · 2014-11-21T09:37:28

Not sure if you have found an answer to this solution yet, but you can make this work fairly easily by creating the region yourself rather than relying on the built in selector behaviour of Marionette:

1) First you need to create a new Region and pass in a DOM element as the el option:

var iframeRegion = new Backbone.Marionette.Region({
    // Make sure you get the DOM object out of the jQuery object (eg. the .get() call)
    el: $('iframe').contents().find('body').get(0) 
});

2) Then added the instance to your App instead of using the selector string:

App.addRegions({
    main: iframeRegion
});

Using iframe body as Region in Backbone Marionette

EDIT:

1 Answers