2

我有多个嵌套的 Web 组件来表示一个网格。我需要在飞镖代码中编写这些。我有一个功能来创建 dart 文档推荐的 web 组件：

void addWebComponent(WebComponent component,String tagName,WebComponent parent) { 
    component.host = (new Element.html("<${tagName}></${tagName}>"));        
    var lifecycleCaller = new ComponentItem(component)
    ..create();
    parent.append(component.host);
    lifecycleCaller.insert();
    return;
}

每个 Web 组件都包含一个模板，如下所示：

  <template>
      <div class="grid">
         <div class="large-12 columns" >                    
            <content></content>
         </div>
       </div>          
  </template>

我的假设是调用 parent.append(component.host); 将注入的 Web 组件 html 添加到 CONTENT 元素中。它没有。这就是我所期望的结果：

<x-grid>
      <div class="grid">
         <div class="large-12 columns">
             <x-row> 
                  <div class="row">...</div>           
             </x-row>
         </div>
       </div>          
</x-grid>

这就是我得到的：

 <x-grid>
      <div class="grid">
         <div class="large-12 columns"> 
                 **[Content should be here!]**               
         </div>
       </div>    
         **[ CONTENT ENDS UP HERE]**
         <x-row> 
                  <div class="row">...</div>           
             </x-row>

</x-grid>

我的猜测是，从 dart 代码中，您无法通过 parent.append(component.host) 添加到 Web 组件的内容中。是否需要其他一些功能或步骤才能完成这项工作？这太痛苦了。

4

1 回答 1

2

Try this:

Add to parent:

List<WebComponent> items = toObservable([]);

Change:

parent.append(component.host);

To:

parent.items.add(component);

Then modify the HTML to be like:

<template>
  <div class="grid">
     <div class="large-12 columns" template iterate="item in items">                    
        {{ new SafeHtml.unsafe(item.host.innerHtml) }}
     </div>
  </div>          
</template>
于 2013-07-04T14:37:46.980 回答