How to see a certain view when clicking a button in backbone

Question

The following code is supposed to render one of three views...either firstRegion, secondRegion or thirdRegion, by clicking on the button in the code...

    const pressButton1 = () => {

const MyView = Mn.View.extend({
  template: _.template('<div><input type="button" value="Click me to see Component 1" onclick="pressButton1()" id="first-region" /></div>'),
  regions: {
    firstRegion: '#first-region',
    secondRegion: '#second-region',
    thirdRegion: '#third-region',
  }
});

const myView = new MyView();
myView.render();
$('body').append(myView.$el);

let loadView = require('./components/cmp1/view').default
console.log(loadView)
myView.getRegion('firstRegion').show(new loadView())

//$(document).foundation();

};

pressButton1();

So I've changed the above but I'm getting 'Uncaught ReferenceError: pressButton1 is not defined at HTMLInputElement.onclick'

How can this be defined?

Thanks!

Answer 1

Marionette (through its extension of Backbone) has an events hash for each view, which binds DOM events from it's el and template. In other words, no onclick needs to be defined in the template html. Each view also has a showChildView function which accepts a region and view, and is being used in the snippet below to show the child views.

const Component1 = Mn.View.extend({
  template: _.template('Template for Component 1')
});
const Component2 = Mn.View.extend({
  template: _.template('Template for Component 2')
});
const Component3 = Mn.View.extend({
  template: _.template('Template for Component 3')
});

const MyView = Mn.View.extend({
  template: _.template('<div><input type="button" value="Click me to see Component 1"  id="first-region-button" /></div><div id="first-region"></div>' +
    '<div><input type="button" value="Click me to see Component 2"  id="second-region-button" /></div><div id="second-region"></div>' +
    '<div><input type="button" value="Click me to see Component 3"  id="third-region-button" /></div><div id="third-region"></div>'),
  regions: {
    firstRegion: '#first-region',
    secondRegion: '#second-region',
    thirdRegion: '#third-region',
  },
  ui: {
    component1Button: 'input#first-region-button',
    component2Button: 'input#second-region-button',
    component3Button: 'input#third-region-button'
  },
  events: {
    'click @ui.component1Button': function() {
      this.showChildView('firstRegion', new Component1())
    },
    'click @ui.component2Button': function() {
      this.showChildView('secondRegion', new Component2())
    },
    'click @ui.component3Button': function() {
      this.showChildView('thirdRegion', new Component3())
    }
  }
});

const myView = new MyView();
myView.render();
$('body').append(myView.$el);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.radio/2.0.0/backbone.radio.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/3.5.1/backbone.marionette.js"></script>