Polymer 1.0:<script>标签是否在<dom-module>内部或外部?

时间:2015-08-04 05:39:58

标签: polymer polymer-1.0 polymer-starter-kit

问题

&#XA;&#XA;
&#XA;

放置&lt; script&gt; 标记的哪种方法是“最佳做法?”

&#xA; &#XA;
    &#XA;
  • 内部 &lt; dom-module&gt;
  • &#xA;
&#XA; &#XA;

&#XA; &#XA;
    &#XA;
  • &lt; dom-module&gt;
  • &#xA;
&#xA;
&#xA;&#xA;

另外,请回答:

&#xA;&#xA;
    &#xA;
  1. 为什么?
  2. &#xA;
  3. 您的答案来源是什么?
  4. &#xA;
  5. 以“错误”的方式做出哪些下行风险?
  6. &#xA;
&#xA;&#xA;
&#xA;&#xA;

聚合物入门套件:OUTSIDE

&#xA;&#xA;

在Polymer Starter Kit中, my-list.html my-greeting.html 文件放置&lt; script&gt; 标记在外面 &lt; dom-module&gt;

&#xA;&#xA;

像这样:

&#xA;&#xA; <预> <代码>&LT; DOM模块&GT;&#XA; &LT;风格&GT; ...&LT; /风格&GT;&#XA; &LT;模板&GT; ...&LT; /模板&GT;&#XA;&LT; DOM模块&GT;&#XA;&LT;脚本&GT; ...&LT; /脚本&GT;&#XA; &#xA;&#xA;
&#xA;&#xA;

其他专家:INSIDE

&#xA;&#xA;

但是,我听过并看过几个例子来自Google员工和建议&lt; script&gt; 标记的Google开发人员应 &lt; dom-module&gt;

&#xA;&#xA;

像这样:

&#xA;&#xA;
 &lt; dom-module&gt;&#xA; &LT;风格&GT; ...&LT; /风格&GT;&#XA; &LT;模板&GT; ...&LT; /模板&GT;&#XA; &LT;脚本&GT; ...&LT; /脚本&GT;&#XA;&LT; DOM模块&GT;&#XA;  
&#XA;

2 个答案:

答案 0 :(得分:6)

正确的答案是 - 这不重要。虽然文档确实像@Mowzer所指出的那样,但这只是一个例子而不是定义。至少一些实际的聚合物元素,如e。 G。 iron-image将它放在dom-module之外。

dom-module和对象Polymer构造函数定义之间的关系是通过&#39; is&#39;建立的。传递给Polymer构造函数的对象的属性和dom-module的id属性。

来自Local DOM guide

  

给&lt; dom-module&gt;与其元素匹配的id属性是属性,并将其放在&lt; dom-module&gt;内。 Polymer会自动将此模板的内容克隆到元素的本地DOM中。

作为旁注,您还可以成功使用&lt; script src =&#34; external.js&#34;&gt;&lt; / script&gt;将html与JS分开 - 我只是猜测这是这个问题的一个可能原因。这个(AFAIK)的唯一缺点是,在这种情况下,元素的硫化版本将显示JS错误的不正确(偏移)代码行号。

答案 1 :(得分:2)

<script>标记看起来应该内部 <dom-module>

Per this definition in the developer guide

元素定义
<dom-module id="element-name">

  <template>
    <style>
      /* CSS rules for your element */
    </style>

    <!-- local DOM for your element -->

    <div>{{greeting}}</div> <!-- data bindings in local DOM -->
  </template>

  <script>
    // element registration
    Polymer({
      is: "element-name",

      // add properties and methods on the element's prototype

      properties: {
        // declare properties for the element's public API
        greeting: {
          type: String,
          value: "Hello!"
        }
      }
    });
  </script>

</dom-module>