Javascript 使用famo.us RenderController切换回时，表面秩序混乱

初学者的问题。我正在尝试安装一个著名的美国应用程序。到目前为止，我在一个简单的实验中得到了很好的结果

现在我的应用程序正在增长，我想允许在“屏幕”之间移动：登陆屏幕->信息屏幕->返回登陆屏幕->等等

我的“屏幕”是

View（）

，视图（）中添加了曲面、修改器等

我使用

RenderController（）

在屏幕之间切换，使用它的

hide（）

和

show（）

函数

问题是，当回到以前使用的屏幕时，表面不再显示

代码：

var app_render_controller=new RenderController（）；
app_render_controller.show（登陆屏幕）；//好啊
app_render_controller.hide（着陆屏幕）；//好啊
app_render_controller.show（信息屏幕）；//好啊
app_render_controller.hide（信息屏幕）；//好啊
app_render_controller.show（登陆屏幕）；//我只看到我的背景表面！

在检查DOM时，我能够在曲面应该位于的位置看到曲面的轮廓，但它们是隐藏的。看起来背景表面现在位于内容表面（滚动视图）的前面。如果我隐藏背景，我会再次看到滚动视图

我读到元素的重叠对应于它们添加到渲染树的顺序。因此，由于基于my View（）的“屏幕”下的树没有改变，所以Scrollview仍然应该像第一次一样绘制在背景上

这是预期的吗？我做错什么了吗？我错过什么了吗

-------编辑------

我的代码（大致）：

查看DOM时，我们可以看到翻转：

第一次显示着陆屏幕：背景，然后是滚动视图及其6个元素

登陆屏幕的第二个显示：滚动视图及其6个元素，然后是背景！

我了解到元素的重叠对应于它们添加到渲染树的顺序

从我所看到的，元素的重叠是按创建顺序的相反顺序设置的（例如，顶部的最后一个），而不是添加到渲染树中

创建曲面时，它将与

实体注册：

提交
RenderNode
上的更改时，将根据创建顺序应用这些更改（如
Object.keys
以数字顺序从数组返回索引）：

希望这能给你一个开始寻找的好地方。如果您共享将您的背景添加到
上下文中的位置，以了解它为什么出现在前面，这会有所帮助。
看起来您在
渲染控制器中发现了一个bug。下面的简单示例展示了与您描述的相同的行为。我已经向他们的回购协议提交了申请

注意：如果在显示下一个视图之前不隐藏当前视图，则会得到相同的行为。有趣的是，如果在隐藏/显示操作之间等待，您会看到不同的错误行为

define(function(require, exports, module) {
  var Engine = require("famous/core/Engine");
  var Surface = require("famous/core/Surface");
  var View = require("famous/core/View");
  var RenderController = require("famous/views/RenderController");
  var Timer = require("famous/utilities/Timer");

  var mainContext = Engine.createContext();

  var renderController = new RenderController();

  mainContext.add(renderController);

  var view1 = new View();
  var view2 = new View();

  var surface1 = new Surface({
    size: [200, 200],
    content: "Red Background",
    properties: {
      lineHeight: "200px",
      textAlign: "center",
      backgroundColor: "#f00"
    }
  });

  var surface2 = new Surface({
    size: [200, 200],
    content: "Green Foreground",
    properties: {
      lineHeight: "200px",
      textAlign: "center",
      backgroundColor: "#0f0"
    }
  });

  var surface3 = new Surface({
    size: [200, 200],
    content: "Blue Background",
    properties: {
      lineHeight: "200px",
      textAlign: "center",
      backgroundColor: "#00f"
    }
  });

  var surface4 = new Surface({
    size: [200, 200],
    content: "Black Foreground",
    properties: {
      lineHeight: "200px",
      textAlign: "center",
      backgroundColor: "#000",
      color: "white"
    }
  });

  view1.add(surface1);
  view1.add(surface2);

  view2.add(surface3);
  view2.add(surface4);

  // If performing hide/show on same tick (or not hiding before show),
  //  you get green-fg, black-fg, red-bg (wrong)
  renderController.show(view1);
  Timer.setTimeout(function() {
    renderController.hide(view1); // <- commenting this out results in same behavior
    renderController.show(view2);
    Timer.setTimeout(function() {
      renderController.hide(view2); // <- commenting this out results in same behavior
      renderController.show(view1);
    }, 1000);
  }, 1000);

// If waiting between each hide/show
//  you get green-fg, blue-bg (wrong), green-fg
//  renderController.show(view1);
//  Timer.setTimeout(function() {
//    renderController.hide(view1);
//    Timer.setTimeout(function() {
//      renderController.show(view2);
//      Timer.setTimeout(function() {
//        renderController.hide(view2);
//        Timer.setTimeout(function() {
//          renderController.show(view1);
//        }, 1000)
//      }, 1000)
//    }, 1000)
//  }, 1000)


});

define（功能（需求、导出、模块）{
var引擎=需要（“著名/核心/引擎”）；
var表面=要求（“著名/核心/表面”）；
var视图=要求（“著名/核心/视图”）；
var RenderController=require（“著名/视图/RenderController”）；
var定时器=需要（“著名/实用程序/定时器”）；
var mainContext=Engine.createContext（）；
var renderController=新的renderController（）；
添加（renderController）；
var view1=新视图（）；
var view2=新视图（）；
var surface1=新曲面({
尺寸：[200200]，
内容：“红色背景”，
特性：{
线宽：“200px”，
textAlign：“居中”，
背景颜色：“f00”
}
});
var surface2=新曲面({
尺寸：[200200]，
内容：“绿色前景”，
特性：{
线宽：“200px”，
textAlign：“居中”，
背景色：“0f0”
}
});
var surface3=新曲面({
尺寸：[200200]，
内容：“蓝色背景”，
特性：{
线宽：“200px”，
textAlign：“居中”，
背景色：“00f”
}
});
var surface4=新曲面({
尺寸：[200200]，
内容：“黑色前景”，
特性：{
线宽：“200px”，
textAlign：“居中”，
背景色：“000”，
颜色：“白色”
}
});
视图1.添加（表面1）；
视图1.添加（表面2）；
视图2.添加（表面3）；
视图2.添加（表面4）；
//如果在同一勾号上执行隐藏/显示（或在显示前不隐藏），
//你得到绿色背景，黑色背景，红色背景（错误）
renderController.show（视图1）；
Timer.setTimeout（函数（）{
renderController.hide（视图1）/视图不知道曲面的分层顺序。当使用RenderController隐藏某些内容时，它会释放曲面正在管理的文档片段。当该视图返回到场景图中时，曲面会从未使用的元素池（如果存在）中获取一个文档片段以填充其内容t、 如果池为空，则会创建新池

由于浏览器实现分层的方式，新创建的DOM节点存在于旧DOM节点之上，如果它们存在于Z中的同一变换中，并且具有相同的CSS zIndex。如果需要显式分层，则不应依赖于创建顺序。尝试通过添加修改器在Z空间中对其进行变换或添加explic来解决此问题表示层应该是什么很重要。
好的，最上面的最后一个，这是合乎逻辑的。最初的show（）很好。现在为什么它会在第二个show（）上翻转呢？花了很多时间制作最小的复制代码并提交问题。我看到关于它是否是一个bug存在争议…我将等待一点结果。
function Surface(options) {
   ...
    this.id = Entity.register(this);
   ...
}

function _applyCommit(spec, context, cacheStorage) {
    var result = SpecParser.parse(spec, context);
    var keys = Object.keys(result);
    for (var i = 0; i < keys.length; i++) {
        var id = keys[i];
        var childNode = Entity.get(id);
    ....
}

define(function(require, exports, module) {
  var Engine = require("famous/core/Engine");
  var Surface = require("famous/core/Surface");

  var mainContext = Engine.createContext();

  var surface1 = new Surface({
    size: [200, 200],
    content: "Red",
    properties: {
      lineHeight: "200px",
      textAlign: "center",
      backgroundColor: "#f00"
    }
  });

  var surface2 = new Surface({
    size: [200, 200],
    content: "Green",
    properties: {
      lineHeight: "200px",
      textAlign: "center",
      backgroundColor: "#0f0"
    }
  });

  // Doesn't matter what order you add these - surface2 will be on top
  mainContext.add(surface2);
  mainContext.add(surface1);
});

define(function(require, exports, module) {
  var Engine = require("famous/core/Engine");
  var Surface = require("famous/core/Surface");
  var View = require("famous/core/View");
  var RenderController = require("famous/views/RenderController");
  var Timer = require("famous/utilities/Timer");

  var mainContext = Engine.createContext();

  var renderController = new RenderController();

  mainContext.add(renderController);

  var view1 = new View();
  var view2 = new View();

  var surface1 = new Surface({
    size: [200, 200],
    content: "Red Background",
    properties: {
      lineHeight: "200px",
      textAlign: "center",
      backgroundColor: "#f00"
    }
  });

  var surface2 = new Surface({
    size: [200, 200],
    content: "Green Foreground",
    properties: {
      lineHeight: "200px",
      textAlign: "center",
      backgroundColor: "#0f0"
    }
  });

  var surface3 = new Surface({
    size: [200, 200],
    content: "Blue Background",
    properties: {
      lineHeight: "200px",
      textAlign: "center",
      backgroundColor: "#00f"
    }
  });

  var surface4 = new Surface({
    size: [200, 200],
    content: "Black Foreground",
    properties: {
      lineHeight: "200px",
      textAlign: "center",
      backgroundColor: "#000",
      color: "white"
    }
  });

  view1.add(surface1);
  view1.add(surface2);

  view2.add(surface3);
  view2.add(surface4);

  // If performing hide/show on same tick (or not hiding before show),
  //  you get green-fg, black-fg, red-bg (wrong)
  renderController.show(view1);
  Timer.setTimeout(function() {
    renderController.hide(view1); // <- commenting this out results in same behavior
    renderController.show(view2);
    Timer.setTimeout(function() {
      renderController.hide(view2); // <- commenting this out results in same behavior
      renderController.show(view1);
    }, 1000);
  }, 1000);

// If waiting between each hide/show
//  you get green-fg, blue-bg (wrong), green-fg
//  renderController.show(view1);
//  Timer.setTimeout(function() {
//    renderController.hide(view1);
//    Timer.setTimeout(function() {
//      renderController.show(view2);
//      Timer.setTimeout(function() {
//        renderController.hide(view2);
//        Timer.setTimeout(function() {
//          renderController.show(view1);
//        }, 1000)
//      }, 1000)
//    }, 1000)
//  }, 1000)


});