How to bind Marionette.ItemView to existing page element, instead of passing in a template?

5
votes

Our application uses Mustache templates in the index.mustache and makes the initial API call with Symfony instead of using Backbone. This is so the user won't be staring at a blank screen on initial page load.

Now how can we use Marionette afterwards to bind to the rendered page elements in the DOM (so we can manipulate the data and add interactivity), instead of passing a new template?

As far as our research suggests, we need to always pass in a template to Marionette Layout and ItemView, or we get a 'no template error'.

Is there an el property we can use, just like in Backbone? The other option would be to extend Marionette.View, but it is not advised to do so.

1
backbone.jsmarionettebackbone-views

1 Answers

7
votes

You just should instantiate the view, without rendering. http://jsfiddle.net/vpetrychuk/PkNTp/

var ItemView = Backbone.Marionette.ItemView.extend({
    el : '.content',
    events : {
        'click' : 'clickHandler'
    },
    clickHandler : function () {
        this.$el.append('clickHandler');
    }
});

new ItemView();