dart - 如何将数据传递给 Dart 聚合物中新创建的元素？

Question

我想创建聚合物自定义元素来模拟游戏中角色的背包。我想要实现的结构示例:

<eq-backpack>
    <eq-slot></eq-slot>
    <eq-slot><eq-item></eq-item></eq-slot>
    <eq-slot></eq-slot>
    <eq-slot><eq-item></eq-item></eq-slot>
</eq-backpack>

在 <eq-backpack>我遍历背包中的元素:

<template repeat="{{item in backpack}}">
     <eq-slot></eq-slot>
</template> 

在 <eq-slot>我检查插槽是否为空:

<template if="{{item != null}}">
    <eq-icon></eq-icon>
</template>

现在我想通过 非原始 数据(包含项目属性的对象 - 许多作为属性传递)到 <eq-slot>然后到 <eq-item>在元素创建期间或之后立即。我怎样才能做到这一点？

我知道两种肮脏的方式:定义一些原始属性，例如:

<eq-slot itemId="item.itemId"></eq-slot>

然后尝试从一些全局数据结构中获取项目，但我想避免维护全局变量。

我还可以创建 <eq-slot>由 var el = new Element.tag("eq-item") 手动然后调用一些 setter el.item = item但它不像声明方式那么优雅。

还有其他可能吗？

Answer 1

您可以直接在您的聚合物代码上使用它:

在 eq-backpack :

<eq-backpack>
  <template repeat="{{item in backpack}}">
    <eq-slot item="{{item}}"></eq-slot>
  </template> 
</eq-backpack>

需要使用 @published ItemType item在你的 eq-slot 元素上。

在 eq-slot

<template if="{{item}}">
  <eq-icon name="{{item.iconName}}"></eq-icon>
</template>

您可以直接将数据绑定(bind)到 eq-slot。这是你想要的吗？

您不需要任何全局数据。

我写了一篇关于聚合物元素中数据绑定(bind)的博客文章。也许这可以帮助你:

http://www.roberthartung.de/nested-polymer-elements-and-data-binding-in-googles-dart/

问候，罗伯特