单击 backbone 中的按钮时如何查看特定视图

Question

以下代码应该呈现三个视图之一...通过单击代码中的按钮，可以是 firstRegion、secondRegion 或 thirdRegion...

    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();

所以我更改了上面的内容，但我得到了 'Uncaught ReferenceError: pressButton1 is not defined at HTMLInputElement.onclick'

如何定义？

谢谢！

Answer 1

Marionette（通过其 Backbone 的扩展）对每个视图都有一个 events hash，它绑定来自它的 el 和模板的 DOM 事件。也就是说，模板中不需要定义onclickhtml。每个视图还有一个 showChildView function 接受区域和视图，并在下面的代码片段中用于显示子视图。

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>

单击 backbone 中的按钮时如何查看特定视图

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

javascript

backbone.js

marionette