单击主干中的按钮时如何查看某个视图答案

【问题标题】：How to see a certain view when clicking a button in backbone单击主干中的按钮时如何查看某个视图
【发布时间】：2018-06-14 13:39:28
【问题描述】：

以下代码应该通过单击代码中的按钮来呈现三个视图中的一个... 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();

所以我已经更改了上面的内容，但我得到了“未捕获的 ReferenceError：pressButton1 未在 HTMLInputElement.onclick 中定义”

如何定义？

谢谢！

【问题讨论】：

标签： javascript backbone.js marionette

【解决方案1】：

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

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>

【讨论】：