[初级教程]第九节--一个完整的例子1-小图切换大图
注：本节中所用到的代码为 AS3 版本。
一、前期回顾
在之前的教程里面大家了解了怎样通过控制器将模型的数据传递到视图，以及改变视图之后，从模型获取数据来刷新自己。那么本节将通过一个简单的图片加载轮换的例子来说明怎样运用模型数据更新来改变视图。
二、通过模型数据更新来改变视图的好处
通过此种方法来改变视图的好处主要体现在：
- 当有多个视图依赖某个模型数据时，不用手动依次将新的数据发送给每个视图。
- 视图和模型单一联系，不用通过控制器来传送数据。
- 模型数据和多个视图形成多对多的关系，数据更新方便、便捷。
三、实现例子的基础部分
Main.as 依然是文档类。主要作用是将 fla 文件和 WeeMVC 系统连接起来。application.actions.LoadDataCommand 命令是用来通知模型加载数据。程序初始化时由视图发送过来。
public static const PLAY_LIST_LOADED:String = "playListLoaded";
public static const LOADING_IMAGE:String = "loadingImage";
完整代码：http://code.google.com/p/weemvc/.../Main.as
Application.model.DataProxy 中方法 loadPlayList 是用来加载数据的。供控制器 LoadDataCommand 调用。当加载完毕时，DataProxy 中的方法onPlayListLoadedHandler 里会发送 WeeMVC 事件：sendWee(Main.PLAY_LIST_LOADED, e.playList);这里即是将加载完成的数据发送给系统。
public function loadPlayList(playListData:String):void {
var plBuilder:PlayListBuilder = new PlayListBuilder();
plBuilder.addEventListener(PlayListBuilderEvent.PLAYLIST_LOAD, onPlayListLoadedHandler);
plBuilder.load(playListData);
}
protected function onPlayListLoadedHandler(e:PlayListBuilderEvent):void {
e.currentTarget.removeEventListener(PlayListBuilderEvent.PLAYLIST_LOAD, onPlayListLoadedHandler);
//将加载完成的数据发送出去，所有的 view 都能得到此通知
sendWee(Main.PLAY_LIST_LOADED, e.playList);
}
完整代码：http://code.google.com/p/weemvc/.../application/model/DataProxy.as
application.view.BigImagePlayer 中的 onDataChanged 回调函数是用来截获在模型中发送的 WeeMVC 事件的。但是，需要在当前视图类（BigImagePlayer）中注册。本例中是setWeeList([Main.PLAY_LIST_LOADED]);。此句的意思是：注册 Main.PLAY_LIST_LOADED 事件，当有此事件发出时，回调函数 onDataChanged 将被调用。
...
setWeeList([Main.PLAY_LIST_LOADED]);
...
override public function onDataChanged(notification:String, data:Object = null):void {
if (notification == Main.PLAY_LIST_LOADED) {
init(data as Array);
}
}
完整代码：http://code.google.com/p/weemvc/.../application/view/BigImagePlayer.as
四、重点剖析
在 WeeMVC 中通过数据来发送事件更新视图要注意：这里的事件名只能是字符串，而不能像之前一样可以是一个命令类。如果是命令类，那么在视图的回调函数onDataChanged里面是不会响应的。
Main.PLAY_LIST_LOADED 写法是将所有的事件都集合到一个地方（这里是放到了文档类），然后用静态常量的方式来使用。这样写的好处是：1 容易找到所有定义的事件。2 不容易出现错误。试想如果直接用字符串，那么拼错一个事件名称，其他所有监听此事件的视图将得不到通知，且程序不会报错。增大排错的难度。
五、demo 下载
源文件下载（FLASH CS3）
通过 SVN 下载源文件：http://code.google.com/p/weemvc/.../FlashCS3
六、问题反馈
没有看明白？直接问此篇教程的作者。联系方式：ibio520#hotmail.com（#号换成@，此地址同时也是 MSN 帐号）