Question

我在Marionette工作并拥有一部手风琴，我们已经设置了一个手风琴，以便各个面板是由

调用和创建的模板

var AccorionView = require(“../folder/AccordionView”);
var expandButtons = require(“../folder/expandButtons”);


var MainPage = Marionette.View.extend({

regions: {
  region: “.region”,
  button: “.buttons”
},

this.newAccordion = new AccordionView({
  header: “header goes here”,
  childView: new panelView(),
});
this.showChildView(‘region’, this.newAccordion);”

我将使用其中的实际展开/折叠全部按钮拉入另一个视图，这将展开并折叠此页面上的所有折叠面板。将在此页面上使用的JavaScript将是

expandAll: function() {
  this.newAccordion.expand();
},

但是，此功能将被放入按钮的新JavaScript视图中。我将把手风琴面板的名称发送到按钮视图时将其调用到此页面，但是如何在该视图上获取该功能以影响该主页上的手风琴面板？

Answer 1

在这种情况下我会使用Backbone.Radio：

const Radio = require('backbone.radio');

const accorionChannel = Radio.channel('accorion');

const MainPage = Marionette.View.extend({
  // ...
  initialize() {
    accorionChannel.on('expand', function() {
      this.newAccordion.expand();
    });

    accorionChannel.on('unexpand', function() {
      this.newAccordion.unexpand();
    });
  }
  // ...
});

const WhateverView = Marionette.View.extend({
  someEventHandler() {
    accorionChannel.trigger('expand');
    // OR
    accorionChannel.trigger('unexpand');
  }
});

无线电频道是单身，你可以每次创建一个新频道，但它会引用同一个频道。这样可以避免传递通道变量或具有全局变量。

Answer 2

你可以用两种方式之一

1）triggers/childViewEvents

// in expandButtons
expandButtons = Marionette.View.extend(
  triggers: {
    'click @ui.expandAll': 'expandAll'
  }
);

// in MainPage
MainPage = Marionette.View.extend({
  childViewEvents: {
    'expandAll': 'expandAll'
  },
  expandAll: function(child) {
    this.newAccordion.expand();
    // OR
    this.getChildView('region').expand();
  }
})

OR

2）使用Backbone.Radio

// in expandButtons
var Radio = require('Backbone.Radio');
var expandChannel = Radio.channel('expand');
var expandButtons = Marionette.View.extend({
  events: {
    'click @ui.expandAll': 'expandAll'
  },
  expandAll: function(e) {
    expandChannel.trigger('expand:all');
  }
});

// in AccordionView
var AccordionView = Marionette.View.extend({
  channelName: 'expand',
  radioEvents: {
    'expand:all': 'expand' // triggers this.expand();
  }
});

在这种情况下，做＃2可能更容易，但不是将无线电监听器添加到AccordionView，而是将监听器连接到PanelView（AccordionView＆＃39; s childView）。这是因为AccordionView的expand功能可能需要iterate each of its children like：

this.children.each(function(childView) {
  childView.expand();
});

影响木偶的其他观点

2 个答案: