sproutcore 更改图像或图标并重新绘制

Question

我想更改 statechart.js 中的图标/图像，即多次显示和隐藏它。我尝试了一个标签图标和一个额外的 subview 。问题:如何以编程方式隐藏/更改图标/ subview ？

通过额外的 childview，我能够更改该值，但此更改在屏幕上不可见。

    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';

Answer 1

SproutCore 使用观察者模式来了解值何时发生了变化。为了使其工作，SproutCore 要求您使用 set()和 get()方法，以便它可以看到更改并可以相应地更新显示。

尝试将最后一行更改为:

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

此外，您绝对应该考虑使用 Bindings轻松地将值绑定(bind)到 Controller (甚至是简单的 SC.Object)，并让您的 View 观察那里的变化。快速示例:

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

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

现在，稍后，您可以在状态图中执行以下操作:

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

并且 View 应该自动更新。

如果您遇到问题，请发表评论，我会尽力提供帮助。