Backbone Marionette Region 显示无渲染答案

【问题标题】：Backbone Marionette Region show without renderBackbone Marionette Region 显示无渲染
【发布时间】：2013-10-21 14:05:50
【问题描述】：

是否可以将已经渲染的视图放入骨干木偶区域而不再次渲染？

例如：

region.show(myView); // This will call render on myView

我不希望该区域再次呈现我的视图。

如果我这样做：

region.attachView(myView); // This won't render myView, but it also won't show it

【问题讨论】：

我认为您需要澄清您的用例。通常，您将处于以下三种情况之一：a）您实例化一个新的视图实例并 show 它，b）该视图已经存在于 HTML 中并且您使用 attachView 能够管理其中的事件（例如点击），c）你已经有一个视图实例的引用，并且可以简单地通过调用show来显示它，如a）。
我有一个视图已经渲染但还没有在 DOM 中，我只想在区域内显示它...

标签： javascript backbone.js marionette

【解决方案1】：

首先覆盖木偶ItemView的构造函数并像这样渲染（如果你想在CollectionView中使用它，CompositeView也覆盖它们的这些方法）：

var fnCons = Marionette.ItemView.prototype.constructor,
    fnRender = Marionette.ItemView.prototype.render;
Marionette.ItemView.prototype.constructor = function(){
  this.firstRender = true;
  fnCons.apply(this,arguments);       
}

Marionette.ItemView.prototype.render = function(){
  this.firstRender = false;
  fnRender.apply(this,arguments);
}

然后只需覆盖默认区域#show，如果视图为 view.firstRender 为 true，则它尚未渲染，必须渲染它，否则无需任何操作。

Marionette.Region.prototype.show = function(view){    
  this.ensureEl();

  var isViewClosed = view.isClosed || _.isUndefined(view.$el);

  var isDifferentView = view !== this.currentView;

  if (isDifferentView) {
    this.close();
  }
  // These lines changed from default marionette action
  if(view.firstRender){
    view.render();
  }else{
    // Don anything else!
  }
  // End of overrided code


  if (isDifferentView || isViewClosed) {
    this.open(view);
  }

  this.currentView = view;

  Marionette.triggerMethod.call(this, "show", view);
  Marionette.triggerMethod.call(view, "show");
}

编辑

上面的解决方案可以正常工作，另一种方法是（这将假定视图已呈现）：

Marionette.Region.prototype.showWithoutRender = function(view){
  this.ensureEl();

  var isViewClosed = view.isClosed || _.isUndefined(view.$el);
  var isDifferentView = view !== this.currentView;

  if (view !== this.currentView) {
    this.close();
  }

  if(isViewClosed || isDifferentView){
    this.open(view);
  }
  this.currentView = view;

  Marionette.triggerMethod.call(this, "show", view);
  Marionette.triggerMethod.call(view, "show");
}

【讨论】：

【解决方案2】：

// assume your view is already rendered
region.ensureEl();
region.open(myView);

虽然不建议这样做，但如果可以，请使用 region.show(myView)。因为它会关闭之前的视图来清理所有的事件监听器等等......

【讨论】：