这种模式对于使用Marionette执行区域切换正确吗

Is this pattern correct for performing region switching with Marionette?

本文关键字：区域 执行 模式 于使用 Marionette      更新时间：2023-09-26

这个问题是基于我之前的一个问题在Marionette中从一个区域切换到另一个区域，视图没有正确呈现。它与之不同，因为我在问我所遵循的方法是否正确，或者是否存在另一种在区域之间进行切换的方法。

我创建了一个包含两个不同区域的布局。在initialize上，布局在布局的两个区域中加载两个视图。说ViewA和ViewB。在ViewA中触发一个事件。该事件由布局消耗以进行切换，并注入其他两个视图。说ViewC和ViewD。

这种方法正确吗？还是我必须遵循另一种模式？路由？

这里有一些代码，其中注释突出了重要部分。

onConfirm : function() {        
        this.leftView =  new ViewC();
        this.rightView = new ViewD();
        this.leftRegion.show(this.leftView);                                                                        
        this.rightRegion.show(this.rightView);
    },
initialize : function() {
        // listen for event triggered from ViewA
        // e.g. GloabalAggregator.vent.trigger("ga:confirm");
        // where "ga:confirm" is a simple string
        GloabalAggregator.vent.on("ga:confirm" , this.onConfirm, this);  
        this.leftView =  new ViewA(), // creating here a new ViewC the style is applied correctly
        this.rightView = new ViewB(); // creating here a new ViewD the style is applied correctly
    },
onRender : function () {
        this.leftRegion.show(this.leftView);                                                                        
        this.rightRegion.show(this.rightView);
    }

要在Layout中的视图之间切换，通常会使用控制器，请查看以下要点作为示例。

基本上，你将不得不创建一个新的控制器

var controller = Marionette.Controller.extend({
  initialize: function(options){
    this.leftRegion = options.leftRegion;
    this.rightRegion = options.rightRegion;
  },
  swap: function() {
    // do the region swapping here
  }
});

你可以从以下视图创建它：

var controller = new MyController({
  leftRegion: this.leftRegion,
  rightRegion: this.rightRegion
});

（其中this引用视图），并让它在listenTo的帮助下侦听该事件。

你可能会发现《木偶》作者的几个有用的例子：

  • 小提琴
  • wiki文章
相关文章：