CODEWITHSUNDEEP
templatesbackbone.jsmarionette
ducin
ducin

Reputation: 26477

backbone/marionette attaching HTML into a region

I'm beginning to use Marionette within an existing backbone application. I've got some HTML which I want to append into a region. In pure backbone, I could just do this.$el.append(html_code) and that was all. As far as I can see, marionette regions allow only to operate on views (which have to implement the render method). Calling append on marionette region throws 'undefined method' errors.

Is it possible to attach plain HTML to a marionette region?

Upvotes: 2

Views: 4235

Answers (4)

Paul
Paul

Reputation: 20091

Using a view

var myHtml = '<h1>Hello world!</h1>';
var myView = new Marionette.ItemView({template: _.constant(myHtml)});
myRegion.show(myView);

Marionette.Renderer.render takes either a function or the name of a template (source code). _.constant creates a function that returns the passed-in parameter.

Attaching HTML

Alternately, the docs for Marionette.Region mention overriding the attachHtml method, see Set How View's el Is Attached.

Upvotes: 0

schmijos
schmijos

Reputation: 8755

No, it's not possible to inject plain html into a Marionette.Region.

Theoretically you could access a regions DOM element with someRegion.el or someRegion.getElement(), but this must be done after rendering (which at least isn't possible inside a Marionette.View with standard behaviour).

But you can achieve the desired result by using a specially crafted Marionette.ItemView:

@someRegion.show(new Marionette.ItemView({template: '<h1>gach</h1>'}));

You maybe also should have a look at Marionette.Renderer .

Upvotes: 3

Mig82
Mig82

Reputation: 5490

I ran into the same problem and tried the answers explained here, but I'm also using require.js and kept getting an error for the #my_view template not being found. If anyone can clarify where does Marionette look up the templates by default, that would be great.

Instead, I solved it by using the text.js plugin for underscore.js. This way you actually can use a plain html file as the template, without the need for nesting it in a script tag. Here's how I did it.

define(['backbone', 'underscore', 'marionette', 'text!tmpl/my_view.html'], function(Backbone, _, Marionette, view_t){

    var MyView = Backbone.Marionette.ItemView.extend({

        template : function(serialized_model) {
            //define your parameters here
            param1 = erialized_model.param1;

            return _.template(view_t)({
                param1: param1
            });
        }
    });
    return MyView;
});

I placed the text.js plugin in the same lib directory as all my other js libraries and my main.js for require declares the path to the templates as

'tmpl':     '../../templates',

My project structure looks like this

root
    index.html
    js
        main.js
        app
             App.js
             views
                 MyView.js
        lib
            require.js
            text.js
            backbone.js
            underscore.js
            jquery.js
            backbone.marionette.js
    templates
        my_view.html

My template 'my_view.html' simply looks like this.

<h1>THIS IS FROM THE TEMPLATE!!!</h1>

Worked perfectly. I hope you find it useful.

Upvotes: 1

Rayweb_on
Rayweb_on

Reputation: 3727

a Marionette ItemView will look for a template and will call render on that template, so when you show the view in the region the html will be displayed just fine with out the need of you defining a render method.

MyImtemView = Backbone.Marionete.ItemView.extend({
    template : "#myTemplate"  
});

var myItemView = new MyItemView();
myLayout.aregion.show(myItemview);

this should work if you save your html in a template like this

`<script id="myTemplate" type="text/template">
  <div><p>your html<p>
  </div>

`

EDIT

you can also declare a render function in your view in case you need to generate and modify your html like this.

MyImtemView = Backbone.Marionete.ItemView.extend({
    template : "#myTemplate",
    render : function (){
       this.$el.append(HMTL); //so here you work your html as you need


    }
});

var myItemView = new MyItemView();
myLayout.aregion.show(myItemview); //the render function of your view will be called here

Upvotes: 1

Related Questions