Question

我一直在尝试创建一个聚合物元素，它根据ajax请求生成一个ul列表，然后根据可以某种方式传入的模板呈现“li”元素。

基本上是尝试对'select2'库进行聚合物重建以实现自动完成。

所以，我到目前为止的基本模板看起来像这样：

<polymer-element name="auto-complete" attributes="url_base item_template">
<aj-ax id="xhr" url="{{url_base}}" params="{}" handle_as="json" on-ajax-response="{{handle_res}}" on-ajax-error="{{handle_err}}"></aj-ax>
    <input id="eingabe" type="text" on-keyup="{{process_request}}" on-blur="{{hide_dropdown}}"/>
    <div id="dropdown" hidden?="{{hide}}">
      <ul>
        <template repeat="{{i in items}}">
          <li> i.text 
             <!--
                   the process_request handler makes the ajax request and sets 
                   the "items" and un-hides the dropdown.
                   the above works, but I want to make it more generic so that 
                   you can pass in a template that reads the item model such as
                   <template ref="{{item_template}}" bind></template> 
                   where item_template is the ID of a template in some outside 
                   scope
              -->
          </li>
        </template>
      </ul>
</polymer-element >
    </div>

我还尝试制作一个基本的auto-complete.html聚合物元素，然后根据自动完成类型对其进行扩展......但无济于事。

有什么想法，想法吗？

如果可能的话，我想坚持使用声明性方法，并避免使用document.createElement自行构建DOM元素

这甚至可能吗？

谢谢！

Answer 1

我想出了一个很酷的方法来实现这一点！

http://jsbin.com/hesejipeha/2/edit

主要思想是，在将任何子模板注入shadow DOM后，有条件地渲染模板（从而可以通过范围内的ref调用它们。）

动态地将模板传递给聚合物元素

1 个答案: