Question

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

{{1}}

所以我改变了上述内容，但我得到了“未捕获的ReferenceError：在HTMLInputElement.onclick＆＃39;

中未定义pressButton1

如何定义？

谢谢！

Answer 1

Marionette（通过其Backbone的扩展）为每个视图都有events hash，它绑定了来自它的el和模板的DOM事件。换句话说，不需要在模板html中定义onclick。每个视图还有一个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>

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

1 个答案: