Famo.us - 如何刪除其觀點與表面

Question

問題：

我famo.us應用程序允許用戶在工作區增添不少「卡」的看法。這些卡可以拖動，直接添加到ContainerSurface中，而不是以任何特定的佈局。

這些卡片有一個刪除按鈕，當按下時刪除該卡片。

目前我 「刪除」 使用

theCardView.render =函數的視圖（）{返回NULL; }

這可以在工作區域去除視圖和表面，但是它有一個奇怪的副作用。當我添加另一張卡片時，刪除按鈕表面位於通常位於其上的標題表面之下。

如果我添加第二張卡片，則第二張卡片上的刪除按鈕會正確顯示。

當我看着DOM後刪除我看到，在我看來，表面的div仍然存在，但空

是否有「刪除」視圖更好/更清潔的方式？還是有什麼我需要做的，以確保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

所以一對夫婦的代碼代碼東西：

012從上下文

刪除表面當調用context.add()創建RenderNode並返回，所有subsquent視圖/修飾符/等加入到這一RenderNode創建附加節點。渲染節點負責向上下文報告它包含的元素（每個表面/修飾符/ 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-index
處理如果你想設置的按鈕的z-index，使其表面本身上面，你還可以修改聚焦視圖的z-index的。這可以通過維護對特定視圖的修飾符的引用並增加z索引來完成。您將必須確保z-index中的更改向下流入每個元素。

我會去第一個解決方案，並從渲染節點刪除元素。