ember-addons / bootstrap-for-ember

Bootstrap for Ember.js
http://ember-addons.github.io/bootstrap-for-ember
Apache License 2.0
704 stars 103 forks source link

Wizard button observers not firing #158

Open ultimatemonty opened 10 years ago

ultimatemonty commented 10 years ago

JSBin: http://jsbin.com/xarax/5/edit

I believe this is the same as what was happening in #97. Anything 1.5.0 or newer does not work. 1.0.0 up to 1.4.0 works as expected.

The Next button is always visible and the Prev/Finish buttons are never visible.

I can manually toggle them in the console using Ember.View.views['button_id'].set('isVisible', true) and I can watch the parentView.parentView.items.selected property change with each step change but the observers are refusing to fire.

I tried switching the CP to Ember.computed and got the same results. Agree with #97 that I don't see anything overtly fishy in the code.

If you can point me in the right direction I'd be glad to submit a PR to fix.

ultimatemonty commented 10 years ago

I was able to make a bit of progress on this but it is not working yet and I don't even know if this is a valid direction.

I added an init method to each button where are defined in the ContainerView. I also defined a new setVisible method. In the init method I set the observer using addObserver. Usintg this method I am able to get the buttons to show/hide when moving through the wizard but it's inconsistent as to what actually is shown or hidden. Could I be using addObserver incorrectly?

   controls: Ember.ContainerView.extend (

        childViews: ['prev', 'next', 'finish']

        prev: Bootstrap.BsButtonComponent.extend(
            init: (->
                @._super();
                @addObserver('parentView.parentView.items.selected', @, @setVisible);
            ).on('init'),

            #TODO: This is a hack until it will be possible to extend from component as it looses the template association
            #see https://github.com/emberjs/ember.js/issues/3376
            layoutName: 'components/bs-button'
            title: 'Prev'
            size: 'xs'
            "data-rel": 'PREV',
            setVisible: (->
                console.log('SET PREV ISVISIBLE');
                @set('isVisible', @get('parentView').get('parentView').get('hasPrev'));
            )
        )
        next: Bootstrap.BsButtonComponent.extend(
            init: (->
                @._super();
                @addObserver('parentView.parentView.items.selected', @, @setVisible);
            ).on('init'),

            #TODO: This is a hack until it will be possible to extend from component as it looses the template association
            #see https://github.com/emberjs/ember.js/issues/3376
            layoutName: 'components/bs-button'
            title: 'Next'
            size: 'xs'
            "data-rel": 'NEXT',
            setVisible: (->
                console.log('SET PREV ISVISIBLE');
                @set('isVisible', @get('parentView').get('parentView').get('hasNext'));
            )
        )
        finish: Bootstrap.BsButtonComponent.extend(
           init: (->
                @._super();
                @addObserver('parentView.parentView.items.selected', @, @setVisible);
            ).on('init'),

            #TODO: This is a hack until it will be possible to extend from component as it looses the template association
            #see https://github.com/emberjs/ember.js/issues/3376
            layoutName: 'components/bs-button'
            title: 'Finish'
            size: 'xs'
            "data-rel": 'FINISH'
            setVisible: (->
                console.log('SET PREV ISVISIBLE');
                @set('isVisible', @get('parentView').get('parentView').get('isLast'));
            )
        )
    )