我有多个嵌套的web组件来表示网格。我需要用dart代码编写这些。我有一个功能来创建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组件的内容中。是否需要其他功能或步骤来实现这一点?它要了我的命。
试试这个:
添加到父级:
List<WebComponent> items = toObservable([]);
更改:
parent.append(component.host);
收件人:
parent.items.add(component);
然后将HTML修改为:
<template>
<div class="grid">
<div class="large-12 columns" template iterate="item in items">
{{ new SafeHtml.unsafe(item.host.innerHtml) }}
</div>
</div>
</template>