New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

can.Component two way binding issues #537

Closed
whitecolor opened this Issue Nov 11, 2013 · 7 comments

Comments

Projects
None yet
2 participants
@whitecolor
Contributor

whitecolor commented Nov 11, 2013

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

This comment has been minimized.

Show comment
Hide comment
@justinbmeyer

justinbmeyer Nov 11, 2013

Contributor

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

Contributor

justinbmeyer commented Nov 11, 2013

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

@justinbmeyer

This comment has been minimized.

Show comment
Hide comment
@justinbmeyer

justinbmeyer Nov 11, 2013

Contributor

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?

Contributor

justinbmeyer commented Nov 11, 2013

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?

@whitecolor

This comment has been minimized.

Show comment
Hide comment
@whitecolor

whitecolor Nov 11, 2013

Contributor

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.

Contributor

whitecolor commented Nov 11, 2013

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

This comment has been minimized.

Show comment
Hide comment
@justinbmeyer

justinbmeyer Nov 11, 2013

Contributor

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.

Contributor

justinbmeyer commented Nov 11, 2013

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.

@whitecolor

This comment has been minimized.

Show comment
Hide comment
@whitecolor

whitecolor Nov 11, 2013

Contributor

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">
Contributor

whitecolor commented Nov 11, 2013

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

This comment has been minimized.

Show comment
Hide comment
@justinbmeyer

justinbmeyer Nov 12, 2013

Contributor

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.
Contributor

justinbmeyer commented Nov 12, 2013

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.
@whitecolor

This comment has been minimized.

Show comment
Hide comment
@whitecolor

whitecolor Nov 12, 2013

Contributor

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.

Contributor

whitecolor commented Nov 12, 2013

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment