why DomElement not remove form dom tree when removeChild()

senquan commented 8 years ago

var FamousEngine = require('famous/core/FamousEngine'); var Node = require('famous/core/Node'); var DOMElement = require('famous/dom-renderables/DOMElement');

var rootNode = FamousEngine.createScene().addChild(); FamousEngine.init();

var baseEl = new DOMElement(rootNode, { classes: ['root'], properties: { 'background-color': '#fff' } });

var currentContentId; var currentContent;

//

var btn1Node = rootNode.addChild(); var btn2Node = rootNode.addChild();

var btn1El = new DOMElement(btn1Node, { classes: ['btn'], content: 'First Content', properties: { 'background-color': 'blue' } }); btn1Node.setSizeMode(1,1) .setAbsoluteSize(150, 60) .setAlign(0, 0, 0) .setMountPoint(0, 0, 0);

var btn2El = new DOMElement(btn2Node, { classes: ['btn'], content: 'Second Content', properties: { 'background-color': 'green' } }); btn2Node.setSizeMode(1,1) .setAbsoluteSize(150, 60) .setAlign(0, 0, 0) .setMountPoint(-1.1, 0, 0);

// btn1Node.addUIEvent('click'); btn2Node.addUIEvent('click');

btn1Node.addComponent({ onReceive: function(e, payload) { if(e === 'click') { showContent(1); } }.bind(this) }); btn2Node.addComponent({ onReceive: function(e, payload) { if(e === 'click') { showContent(2); } }.bind(this) });

var contentNode = rootNode.addChild(); var contentEl = new DOMElement(contentNode, { classes: ['content'], properties: { 'background-color': '#000', 'top': '100px' } }); contentNode.setSizeMode(1,1) .setAbsoluteSize(800, 800) .setAlign(0, 0, 0) .setMountPoint(0, 0, 0);

function showContent(id){

if(currentContent != id) {
    if(currentContent) contentNode.removeChild(currentContent);
    currentContent = createContent(id);
    contentNode.addChild(currentContent);
}
currentContentId = id;

}

    var line1SubNode = line1Node.addChild();
    new DOMElement(line1SubNode, {
        classes: ['content1-line1-sub1'],
        properties: {
            'background-color': '#fff'
        }
    });
    line1SubNode.setSizeMode(1,1)
        .setAbsoluteSize(150, 20)
        .setAlign(1, 1, 0)
        .setMountPoint(1, 1, 0);    

    var line2Node = content.addChild();
    new DOMElement(line2Node, {
        classes: ['content-line2'],
        content: 'Content1 line2',
        properties: {
            'color': '#fff',
            'background-color': 'blue'
        }
    });
    line2Node.setSizeMode(1,1)
        .setAbsoluteSize(300, 50)
        .setAlign(0, 0, 0)
        .setMountPoint(0, -1.1, 0);
}else if( id == 2) {
    var line1Node = content.addChild();
    new DOMElement(line1Node, {
        classes: ['content-line1'],
        content: 'Content2 line1',
        properties: {
            'color': '#fff',
            'background-color': 'green'
        }
    });
    line1Node.setSizeMode(1,1)
        .setAbsoluteSize(300, 50)
        .setAlign(0, 0, 0)
        .setMountPoint(0, 0, 0);

    var line2SubNode = line1Node.addChild();
    new DOMElement(line2SubNode, {
        classes: ['content2-line1-sub1'],
        content: 'Content2 line1 sub',
        properties: {
            'color': '#000',
            'font-size': '12px',
            'background-color': 'yellow'
        }
    });
    line2SubNode.setSizeMode(1,1)
        .setAbsoluteSize(150, 20)
        .setAlign(1, 1, 0)
        .setMountPoint(1, 1, 0);
}
return content;

}

roblav96 commented 8 years ago

var Dismount = function(node) {
    var aNodes = [];
    if ( !(node instanceof famous.core.Node) )
        throw "node not a Famous#Node";

    var f = function(current) {
        aNodes.push(current);
        var aChildren = current.getChildren();
        for ( var i in aChildren )
            f(aChildren[i]);
    };

    f(node);

    while ( aNodes.length ) {
        var x = aNodes.pop();
        if ( x.isMounted())
            x.dismount();
    }
}

CompSciFutures commented 8 years ago

Dup of https://github.com/Famous/engine/issues/489

Famous / engine

why DomElement not remove form dom tree when removeChild() #501