Famo.us-如何删除带有曲面的视图

问题：

我的famo.us应用程序允许用户在工作区添加许多“卡片”视图。这些卡是可拖动的，直接添加到集装箱表面，而不是在任何特定的布局中

这些卡有一个删除按钮，按下该按钮后，将删除该卡

目前，我使用“删除”视图

theCardView.render=function（）{return null；}

这可以将视图及其表面从工作区域移除；然而，它有一个奇怪的副作用。当我添加另一张卡时，删除按钮表面位于它通常所在的标题表面之下

如果我添加了第二张卡，则第二张卡上的删除按钮将正确显示

当我在删除后查看DOM时，我看到视图中曲面的div仍然存在，但为空

是否有更好/更干净的方法“删除”视图？或者我还需要做些什么来确保DOM被清理

我可以通过将按钮的z索引设置为1来解决这个问题；但是，当您将这些卡相互拖动时，会出现问题-按钮始终位于所有其他卡的顶部

如何添加卡片视图的代码

this._eventInput.on('add-cards', function() {
 for (var i=0; i < that.cardPicker.selected.length ;i++){
            var x = new CardView({data:that.cardPicker.selected[i]});
            that.subscribe(x);
            that.cards.push(x);
            that.contentContainer.add(x);   
        }
  });

视图构造函数的代码

function CardView(data) {
    View.apply(this, arguments);
    that = this;

    this.dbdata = data.data;

    this.layout = new HeaderFooterLayout({
        headerSize: 43,
        footerSize: 0
    });

    // Header
    var oname = this.dbdata.dbname+"."+this.dbdata.table.name;
    this.headerSurface = new Surface({size: [275, 43],
               content: oname
              ,properties: {
                     backgroundColor:'rgb(51, 51, 51)'
                    ,color:'white'
                    ,paddingTop:'10px'
                    ,paddingLeft:'10px'
                }
            });
    this.draggable = new Draggable();
    this.headerSurface.pipe(this.draggable);
    this.draggable.activate();
    this.layout.header.add(this.headerSurface);


    // Header delete button
    this.deletebtn = new Surface({size: [55, 40],
               content: '<button type="button" class="btn btn-default">del</button>'
              ,properties:{
              } 
            });
    this.mod = new Modifier({
                transform: Transform.translate(215, 0, 0)
            });     
    this.layout.header.add(this.mod).add(this.deletebtn);
    this.deletebtn.pp = this;
    this.deletebtn.on('click', function() {
      that._eventOutput.emit('delete-card',this.pp);
    });


    this.layout.content.add(new Surface({size: [275, 300],
                                      properties: {
                                            backgroundColor:'rgb(236, 236, 236)'
                                        }
                                    }));

    // a modifier that centers the surface
    this.centerModifier = new Modifier({
      origin : [0.5, 0.5],
      align: [0.5, 0.5]
    });

    this.add(this.draggable).add(this.centerModifier).add(this.layout);
}

功能卡视图（数据）{
视图。应用（此，参数）；
那=这个；
this.dbdata=data.data；
this.layout=新建HeaderFooterLayout({
校长：43，
页脚大小：0
});
//标题
var oname=this.dbdata.dbname+“+this.dbdata.table.name；
this.headerSurface=新曲面（{size:[275,43]，
内容：oname
，物业：{
背景颜色：'rgb（51,51,51）'
，颜色：'白色'
，paddingTop:'10px'
，左填充：'10px'
}
});
this.draggable=新的draggable（）；
this.headerSurface.pipe（this.draggable）；
this.draggable.activate（）；
this.layout.header.add（this.headerSurface）；
//标题删除按钮
this.deletebtn=新曲面（{size:[55,40]，
内容：“德尔”
，物业：{
} 
});
this.mod=新修改器({
transform:transform.translate（215,0,0）
});     
this.layout.header.add（this.mod）.add（this.deletebtn）；
this.deletebtn.pp=此；
this.deletebtn.on（'click'，function（））{
即._eventOutput.emit（'delete-card'，this.pp）；
});
this.layout.content.add（新的表面（{size:[275300]），
特性：{
背景颜色：'rgb（236236236）'
}
}));
//使曲面居中的修改器
this.centerModifier=新修改器({
来源：[0.5,0.5]，
对齐：[0.5,0.5]
});
this.add（this.draggable）.add（this.centerModifier）.add（this.layout）；
}

所以有几件事：

从上下文中删除曲面
调用

context.add（）

a

RenderNode

时，所有添加到此

RenderNode

的子序列视图/修改器/etc都将创建其他节点。渲染节点负责向上下文报告其包含的元素（每个曲面/修改器/etc负责报告其表示的内容）

要清除渲染节点中的所有元素，请执行以下操作

var myView = new View();
var context = Engine.createContext();
myView.node = context.add(myView); // Now the context knows about your view
myView.node.set({}); // Now the context doesn't

现在的问题仍然是，父节点/上下文将保留对原始节点的引用，即使它不包含任何内容。这是众所周知的，并正在努力寻求解决办法

处理z指数
如果要设置按钮的z索引，使其位于曲面本身上方，还可以修改聚焦视图的z索引。这可以通过保持对特定视图修改器的引用并增加z索引来实现。您必须确保z索引中的更改向下流入每个元素

我会选择第一种解决方案，并从渲染节点中删除元素。

谢谢。已尝试myView.node.set（{}）；它确实从视觉上移除了卡片和它的物品。然而，当我添加一张新卡时，DOM并没有被清理，删除按钮的z索引是错误的。

var myView = new View();
var context = Engine.createContext();
myView.node = context.add(myView); // Now the context knows about your view
myView.node.set({}); // Now the context doesn't