can.Component two way binding issues

[wclr]

I've described the problem with two way binding here:

#508 (comment)

Issue #1:
Such configuration:

<low-level showing='visible'></low-level>

won't currently work, as two way binding works only if parent's and low-level attributes share the same name (visible in this case):

<low-level visible=visible'></low-level>

Issue #2:

The case:
if while initialization "showing" is not set on parent scope and "visible" is set on init of low-level component.

It would be great if in that case after low-level component init, "showing" attribute of parent scope would be set to "visible" attribute value of low-level scope.

[justinbmeyer]

Can you create a test because #1 works for me?

[justinbmeyer]

This does not appear to be an issue. The fiddle you linked to in 508 is broken because your code is incorrect. my-toggler's methods should be changing "shown" not visible.

can.Component({
    tag: "my-toggler",
    template: "{{#if visible}}<content/>{{/if}}",
    scope: {
        shown: true,
        show: function(){
            this.attr('shown', true)
         },
         hide: function(){
            this.attr("shown", false)
         }
    }
})


can.Component({
    tag: "my-app",
    scope: {
        visible: true,
        show: function(){
            this.attr('visible', true)              
        }
    }
});

var template = can.view.mustache("<my-app>"+
    '{{^visible}}<button can-click="show">show</button>{{/visible}}'+
    '<my-toggler shown="visible">'+
    'content'+
    '<button can-click="hide">hide</button>'+
    '</my-toggler>'+
    '</my-app>')

var frag = template({})

What's your email address? Can you shot me a message at Justin AT Bitovi?

[wclr]

Well perhaps fiddle is incorrect, but there was another code in my version that I updated from master a couple of days before I found out this issue, and it didn't work:

    // there's a value, setup two-way binding ...
    twoWayBindings[name] = propertyDataFromScope.parent

and in current version it is:

    // setup two-way binding
    twoWayBindings[name] = computeData

Ok. But some problems still remain.

[justinbmeyer]

I'm not sure what you are talking about. Please submit a breaking test. The code in your fiddle was wrong.

Sent from my iPhone

On Nov 11, 2013, at 5:12 PM, Alex Osh notifications@github.com wrote:

Well there was another code in my version that I updated from master a couple of days before I found out this issue:

                // there's a value, setup two-way binding ...
                twoWayBindings[name] = propertyDataFromScope.parent

and in current version it is:

                                    // setup two-way binding
                twoWayBindings[name] = computeData

Ok. But some problems still remain.

—
Reply to this email directly or view it on GitHub.

[wclr]

this is broken in latest version:
https://gist.github.com/whitecolor/7422552
because I try to bind the nested property

<my-toggle shown="props.visible">

[justinbmeyer]

Nested properties as defaults will not work the way you are using them.

Sent from my iPhone

On Nov 11, 2013, at 5:32 PM, Alex Osh notifications@github.com wrote:

this is broken in latest version:
https://gist.github.com/whitecolor/7422552
because I try to bind the nested property

— Reply to this email directly or view it on GitHub.

[wclr]

What do you think about such case:

          can.Component({
                tag: 'my-toggle',
                template: '<button can-click="toggle">Toggle</button>',
                scope: {
                    shown: true,
                    toggle: function(){
                        this.attr('shown', !this.shown)
                    }
                }

            })

            can.Component({ 
                tag: 'my-parent',
                // besides two way binding between visible and shown attributes, 
                // if there is no "visible" attribute defined in my-parent scope, it is set to initial "shown" value of my-toggle
                template: '<my-toggle shown="visible"></my-toggle>',
                scope: {
                }
            })

my-parent creates my-toggle and sets shown="visible", but visible attribute is not presented in my-parent scope initially, and in my-toggle it has default value.

Some times it could be useful if while init of my-toggle component, visible attribute of my-parent would be set to value of shown attribute of my-toggle.