sproutcore change image or icon and repaint

I want to change the icon/image in the statechart.js, that is display and hide it a number of times. I tried a icon to a label and a extra childview. Question: How to hide/change the icon/childview programmatically?

With the extra childview I was abled to change the value, but this change is not visible on the screen.

    SC.LabelView.design icon: 'icon-heart',
    ..
    heart: SC.ImageView.extend({
                classNames: ['icon-heart'],
                  value: 'heart.png'
                }),

MyApp.mainPage.getPath('mainPane.navigationView.heart').value = 'icon-next';

Solution

SproutCore uses the observer pattern to know when values have changed. In order for this to work, SproutCore requires that you use the set() and get() methods so that it will see the change and can update the display accordingly.

Try changing your last line to:

MyApp.mainPage.getPath('mainPane.navigationView.heart').set('value', 'icon-next');

Also, you should definitely look at using Bindings to easily bind the value to a controller (or even a plain SC.Object for something this simple) and have your view watch for changes there. Quick example:

myApp.myController = SC.Object.extend({
  iconValue: 'icon-heart'
})

myApp.myView = SC.ImageView.extend({
  valueBinding: SC.Binding.oneWay('myApp.myController.iconValue')
})

Now, later on, you can do the following from within your statechart:

myApp.myController.set('iconValue', 'icon-next');

and the view should automatically update.

Please post a comment if you run into issues and I'll do my best to help.