Cairngorm的结构及开发使用（4）（转）

weixin_30839881

于 2010-05-08 18:56:00 发布

阅读量53

点赞数

CC 4.0 BY-SA版权

本文介绍如何在Flex应用中使用Cairngorm框架实现组件间的事件传递和数据绑定。具体展示了如何通过wishListCartComp组件触发addProductToWishList事件，并将其转化为Cairngorm事件，实现产品添加到愿望清单的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ShoppingCart实例被在Tab Navigator 中的wishListCartComp调用。

首先，wishListCartComp实例数据绑定到ModelLocator.wishList,接着wishListModel上的任何改动都会自动影响Shopping Cart组件内部。这是acion中一个大组件重用的好例子。

addProduct事件调用了一个方法，addProductToWishList(),你需要在SideArea.mxml中定义，如下:

private function addProductToWishList( event : Object ) : Void

{

EventBroadcaster.getInstance().broadcastEvent(

ShopController.EVENT_ADD_PRODUCT_TO_WISH_LIST, event );

}

这个方法很好地将用户动作翻译成适当的Cairngorm事件；现在，当用户把产品放入ShoppingCart组件中的WishListCartComp实例时，被认为是添加到WishList的用户动作，这个动作被翻译成适当的Cairngorm事件。

我们在ProductDetails MXML组件中使用addProductToWishList()方法，如下使用：

addProductToWishList="addProductToWishList( event )"

很明显，这要求ProductDetails MXML组件能广播addProductToWishList事件效果就像是按下“添加到WishList”发生的事件一样。这样最后视图部分代码如ProductDetails.mxml

首先，在ProductDetails上更新MetaData定义要广播的新的事件，如下显示：

<mx:Metadata>

[Event("addProduct")]

[Event("addProductToWishList")]

</mx:Metadata>

最后，声明新的按钮，将它的点击事件变为更有意义的业务事件，addProductToWishList。声明一个有用的方法来广播addProductToWishList事件及附加的信息：产品被添加（当前选择的产品）和用户需要的数量：

private function addProductToWishList() : Void

{

var event : Object = new Object();

event.type = "addProductToWishList";

event.product = selectedItem;

event.quantity = quantity;

dispatchEvent( event );

}

你可以加入你一个新的按钮”添加到购物篮”来代替加入到需求列表，代码如下：

<mx:Button label="Add to Cart" click="addProduct();" />

<mx:Button label="Add to WishList" click="addProductToWishList();" />

这是一个很好的示例我们在第三章讨论过：把一个按钮的点击事件转变为一个更有意义的事件来表示我们的业务领域("addProductToWishList"),轻松地构建MXML组件。这样ProductDetails和SideArea MXML组件通过被广播，绑定不同的事件。

这就是它了。现在你已经加入了全部代码到MXML来表示用户操作需求列表的流程。通过动态绑定MXML到模型定位器类和将用户动作翻译成Cairngorm事件，视图被绑定在最底层的Cairngorm架构结构上。

转载于:https://www.cnblogs.com/jin20000/archive/2010/05/08/1730628.html