can't mount normally anymore

[ghost]

I can't mount this anymore

 var element = vidom.createNode("div").attrs( { style: {  display: "block", width: "10px" }  });
vidom.mountToDom(
document.getElementById("fooBar"),   element);

Nothing get attached if I look into the console.

[dfilatov]

Is <div id="fooBar"> empty?

[ghost]

It was not. Works if empty. Before it doesn't need to be empty. It could have nodes inside. Before it works like other VD implementations without this issue.

I also notice that CSS sometimes now become a object object.

[dfilatov]

It was not. Works if empty. Before it doesn't need to be empty. It could have nodes inside. Before it works like other VD implementations without this issue.

Yes, after #120 it was changed.

I also notice that CSS sometimes now become a object object.

Sometimes? I need case.

[ghost]

If you see how DOM normally works with appendChild and insertBefore, you can insert even if not empty. Mount should work like that, or?

[dfilatov]

No, it shouldn't. I want to be able to adopt existing DOM tree.

[ghost]

For CSS. Try to set a click event or css style inside a node you use as a reference in a component.

var InputComponent = vidom.createComponent({
        onRender : function() {
            return vidom.createElement('div')
                .attrs({ className : 'input' })
                .children(
                    this.setDomRef( // add "control" reference to get corresponding DOM node further
                        'control',
                        vidom.createElement('input')
                            .attrs({
                                type : 'text',
                                css: { width:"200px", height:"4200px"}, // not working!!
                                className : 'input__control',
                                onClick: function() { alert("Hello, World!!") }, // not working!!
                                onFocus : this.onFocus.bind(this)
                            })));
        },

        onMount : function() {
            this.getDomRef('control').focus(); // use reference got in onRender()
        },

        onUnmount : function() {
        },

        onFocus : function() {
        }
    });

[dfilatov]

css: { width:"200px", height:"4200px"}

there's no such attribute, you have to use style instead of css

[ghost]

Ok. I tried that too. Didnt work

[ghost]

And the event handler didnt work

[dfilatov]

vidom.createElement??? vidom has no such method. Total mess.

[ghost]

Ok. I experimenting with sub/functions to figure out why it wont work. I tried to create a sub/function that could write some console.log data and tried to avoid conflictt with native methods.

var InputComponent = vidom.createComponent({
        onRender : function() {
            return vidom.createNode('div')
                .attrs({ className : 'input' })
                .children(
                    this.setDomRef( // add "control" reference to get corresponding DOM node further
                        'control',
                        vidom.createNode('input')
                            .attrs({
                                type : 'text',
                                style: { width:"200px", height:"4200px"}, // not working!!
                                className : 'input__control',
                                onClick: function() { alert("Hello, World!!") }, // not working!!
                                onFocus : this.onFocus.bind(this)
                            })));
        },

        onMount : function() {
            this.getDomRef('control').focus(); // use reference got in onRender()
        },

        onUnmount : function() {
        },

        onFocus : function() {
        }
    });

[dfilatov]

This code works as expected:

• styles are applied
• input is focused

[ghost]

And a hello wold pops up when you click? Or you can have double events? Not working here. Will check later

[dfilatov]

"Hello, World!!" popup shows as expected