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

Question

我想把statechart.js里的icon/image改一下，也就是多次显示和隐藏。我尝试了一个标签图标和一个额外的子视图。问题：如何以编程方式 hide/change icon/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 轻松地将值绑定到控制器（对于这种简单的事情，甚至是普通的 SC.Object）并让您的视图观察那里的变化。快速示例：

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

并且视图应该会自动更新。

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

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

sproutcore change image or icon and repaint

sproutcore

sproutcore-views