我和我的同事Patrick正在将一个自动完成组件从Web UI转换为Polymer.dart。在Web UI中,我们为自动完成提供了一个HTML渲染列表,以便程序员有机会样式化结果。根据输入的值,我们筛选列表并显示匹配的结果。
您建议在Polymer.dart中实现相同的行为应该采取什么方法?我们应该完全不同的方法吗?
旧的Web UI代码:
<template iterate="entry in filteredEntries">
<li class="b-autocomplete-results-li">{{ entry.sanitizedHtml }}</li>
</template>
一个条目的类:
class AutocompleteEntry {
final String id;
final String searchableText;
final Element _element;
AutocompleteEntry(this.id, this.searchableText, this._element) {
// remove the data-id and data-text since we don't need them in the html
_element.dataset.remove('text');
_element.dataset.remove('id');
}
get sanitizedHtml {
var validator = new NodeValidatorBuilder()..allowHtml5();
var documentFragment = document.body.createFragment(_element.outerHtml, validator: validator);
return documentFragment;
}
}