0

The extra wrapping element generated by Backbone/Marionette views causes problems (with jQuery Mobile), so I need to unwrap it. After unwrapping, the layout is good, but events are no longer fired (see demo).

How to unwrap the extra element while maintaining events?

Demo

It uses the Marionette.BossView plugin but the idea is the same without.

Community
  • 1
  • 1
Ksthawma
  • 1,257
  • 1
  • 16
  • 28

1 Answers1

0

Marionette.ItemView extends from Backbone.View which has property named tagName. When you mentioning it in view declaration your wrapping element became the element mentioned in tagName.

For you demo example better to use tagName instead of changing the way Marionette renders the view.

Change you view to the following and it will work!

var SubView1 = Backbone.Marionette.ItemView.extend({
  className: 'SubView1',
  template: function () {
    return '(SubView1) Click Me!'; // moved button tag and mentioned it in tagName
  },
  tagName: 'button',
  triggers: {
    'click': 'click:button' // no need to 'button' selector, it's already a root element
  }        
});

var SubView2 = Backbone.Marionette.ItemView.extend({
  className: 'SubView2',
  template: function () {
    return '(SubView2) Click Me!'; // moved button tag and mentioned it in tagName
  },
  tagName: 'button',
  triggers: {
    'click': 'click:button' // no need to 'button' selector, it's already a root element 
  }
});

var TopView = Backbone.Marionette.BossView.extend({
  className: 'TopView',
  subViews: {
    buttonView1: SubView1,
    buttonView2: SubView2
  },
  subViewEvents: {
    'buttonView1 click:button': 'onSubViewClickButton',
    'buttonView2 click:button': 'onSubViewClickButton' // there was a typo here
  },
  onSubViewClickButton: function () {
    $('body').append('<div>You clicked it, and TopView responded!</div>');
  }
});



var topView = new TopView();
topView.render().$el.appendTo($('body'));

Hope this helps!

vvahans
  • 1,849
  • 21
  • 29