在聚合物中实现引导令牌字段(jquery小部件)

Question

我认为这更像是jquery集成问题，但这里是我的问题/ bug。我试图将引导标记场封装为一个聚合物元素，但是得到了以下错误/跟踪：

Error: An attempt was made to reference a Node in a context where it does not exist.
  at GeneratedWrapper.mixin.insertBefore (http://localhost:3005/ShadowDOM/src/wrappers/Node.js:266:30)
  at Object.<anonymous> (http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js:6067:21)
  at jQuery.fn.extend.domManip (http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js:6262:15)
  at jQuery.fn.extend.before (http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js:6065:15)
  at Tokenfield.createToken (http://localhost:3005/elements/ui-widgets/bootstrap-tokenfield/bootstrap-tokenfield.js:175:21)

守则：

<polymer-element name="my-bootstrap-tokenfield">
  <template>
    <link rel="stylesheet" href="bootstrap-tokenfield.css">
    <input type="text" class="form-control" id="tokenfield" value="red,green,blue" />
  </template>
  <script src="bootstrap-tokenfield.js"></script>
  <script>
    Polymer('my-bootstrap-tokenfield', {
      applyAuthorStyles : true, 
      ready : function() {
        // default example
        $(this.$.tokenfield).tokenfield({
           typeahead: {
               name: 'tags',
               local: ['red','blue','green','yellow','violet','brown','purple','black','white'],
           },
           allowDuplicates: true
        });
      }
    })
  </script>
</polymer-element>

想法，建议？

Answer 1

多亏了艾比德尔帮我解决问题。将输入包装在'div‘标签中，一切都很好。因为令牌字段是构建小部件的“输入”父级，这是有意义的。

<template>
    <link rel="stylesheet" href="bootstrap-tokenfield.css">
    <div>
       <input type="text" class="form-control" id="tokenfield" value="red,green,blue" />
    </div>
</template>