gistfile1.js

            can.Component({

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

            })

            can.Component({

                tag: 'my-parent',


                template: '<p>{{#props.visible}}Some thing{{/props.visible}}</p>' + '<my-toggle shown="props.visible"></my-toggle>',

                scope: {
                    props: {
                        visible: true
                    },

                    name1: 'Alex'
                },

                helpers: {
                    name: function(){
                        return 'Some name'
                    }
                },

                events: {
                    '{scope.props} visible': function(scope, ev, visible){
                        slog('scope.visible change', visible)
                    }
                }
            })

            $('body').append(can.view.mustache('<my-parent/>')())