Famo.us - Как удалить вид с поверхности на ней

Question

Выпуск:

мое famo.us приложение позволяет пользователю добавлять много взглядов «карты» на рабочей области. Эти карты перетаскиваются, добавляются непосредственно в ContainerSurface, а не в какой-либо конкретной компоновке.

Карты имеют кнопку удаления, которая при нажатии удаляет карту.

В настоящее время я "удалить" представление с помощью

theCardView.render = функция() {возвращение нуль; }

Это работает при удалении вида и поверхностей на нем из рабочей области, однако имеет странный побочный эффект. Когда я добавляю другую карту, поверхность кнопки удаления находится под поверхностью заголовка, на которой она обычно находится.

Если я добавлю вторую карту, тогда кнопка удаления на этой второй карте отображается правильно.

Когда я смотрю на DOM после удаления я вижу, что дивы для поверхностей на мой взгляд, по-прежнему существует, но пустой

Есть ли лучше/уборщик способ «удалить» представление? Или есть что-то еще, что мне нужно сделать, чтобы очистить DOM?

Я могу обойти эту проблему, установив z-индекс кнопки на 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 создан и возвращаемые, все 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-индекс
Если вы хотите установить Z-индекс кнопки, так что она находится выше самой поверхности, вы можете также изменить Z-индекс сфокусированного зрения. Это может быть достигнуто путем сохранения ссылки на модификатор конкретного вида и увеличения z-индекса. Вы должны будете обеспечить, чтобы изменение в z-index стекало в каждый элемент.

Я бы выбрал первое решение и удалил элементы из узла рендеринга.