Question

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

使用额外的子视图，我可以更改值，但此更改在屏幕上不可见。

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

并且视图应自动更新。

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

sproutcore更改图像或图标和重绘

1 个答案: