Question

问题：

我的famo.us应用程序允许用户添加许多＆＃34; card＆＃34;在工作区域的意见。这些卡是可拖动的，直接添加到ContainerSurface，而不是任何特定的布局。

这些卡片有一个删除按钮，按下该按钮会删除该卡片。

目前我＆＃34;删除＆＃34;视图使用

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

这适用于从工作区域移除视图及其表面;但是，它有一个奇怪的副作用。当我添加另一张卡时，删除按钮表面位于它通常所在的标题表面下方。

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

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

是否有更好/更清洁的方式来删除＆＃34;一个看法？或者我还需要做些什么来确保清理DOM？

我可以通过将按钮的z-index设置为1来解决此问题;但是当你将卡片拉到彼此时会导致问题 - 按钮始终位于所有其他卡片的顶部。

我添加CardViews的代码

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);   
        }
  });

我如何删除视图的代码

this._eventInput.on('delete-card',function(e){
        // e is the CardView object that has the button that was clicked
        removeFromArray(that.cards,e);
        e.render = function(){ return null; }
    });

视图构造函数的代码

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);
}

Answer 1

所以有几件事：

从上下文中删除曲面
当调用context.add()创建并返回RenderNode时，添加到此RenderNode的所有后续视图/修饰符/等都会创建其他节点。渲染节点负责向上下文报告它包含的元素（每个表面/修饰符/等负责报告它所代表的内容）。

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

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-index
如果要设置按钮的z-index以使其位于曲面本身之上，则还可以修改聚焦视图的z-index。这可以通过维护对特定视图的修饰符的引用并增加z-index来实现。您必须确保z-index的变化向下流入每个元素。

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

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

1 个答案: