Question

我有一个聚合物自定义元素，它使用一些计算函数。这些函数在定义文件中使用时效果很好，但是当在导入定义文件的文件中使用时，我会收到此错误。计算方法typeIsSearch未定义

以下是示例代码

<template is="dom-if" if="{{typeIsSearch(type)}}">
    <label>text</label><input type="text" value="{{text::change}}">
</template>

和功能代码

Polymer
...
    typeIsSearch: function(type) {
        return type === "search";
    },
...

是否可以调用导入文件中的计算函数？

自定义Polymer元素位于名为geo-lookup.html的文件中在该文件中，计算的函数按预期工作但是在另一个文件index.html中，它有以下导入

<link rel="import" href="../geo-lookup.html">

计算出的函数调用给出了一个错误，表明它没有定义。包含{{type}}的非计算属性在包含文件中正确呈现。我希望该函数在导入代码的文件中工作相同，就像它在声明的文件中一样。任何有关如何使其工作的帮助将不胜感激。

以下是index.html文件的完整代码

<html>
<head>
  <title>geo-lookup</title>

  <script src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
  <link rel="import" href="../../bower_components/paper-styles/demo-pages.html">
  <link rel="import" href="../../bower_components/paper-slider/paper-slider.html">
  <link rel="import" href="../../bower_components/paper-radio-group/paper-radio-group.html">
  <link rel="import" href="../../bower_components/paper-radio-button/paper-radio-button.html">
  <link rel="import" href="../geo-location.html">
  <link rel="import" href="../geo-lookup.html">
  <style>
     .horizontal-section {
          max-width: 600px;
          margin-bottom: 24px;
      }

     label { display: inline-block; width:10%;}

  </style>

</head>
<body unresolved>
  <h1>GEO Lookup</h1>

  <div class="horizontal-section-container">
    <template is="dom-bind">

        <geo-location watch-pos latitude="{{latitude}}" longitude="{{longitude}}" accuracy="{{accuracy}}"></geo-location>
        <h2><pre>&lt;geo-location latitude="<span>{{latitude}}</span>"
            longitude="<span>{{longitude}}</span>"
            accuracy="<span>{{accuracy}}</span>">
            &lt;/geo-location></pre></h2>

            <div style="width: 100%">
                  <label>url</label><input type="text" value="{{url::change}}" disabled style="width:80%;"><br/>
                  <div>
                      <label>type</label><select id="typeSelect" value="{{type::change}}" style="width:10%;">
                           <option value="search">search</option>
                          <option value="reverse">reverse</option>
                      </select>
                      <paper-radio-group selected={{type}}>
                          <paper-radio-button name="search" value="search">search</paper-radio-button>
                          <paper-radio-button name="reverse" value="reverse">reverse</paper-radio-button>
                      </paper-radio-group>
                  </div>
                   <template is="dom-if" if="{{typeIsSearch(type)}}"
                      <label>text</label><input type="text" value="{{text::change}}" style="width:80%;"><br/>
                   </template>
                   <template is="dom-if" if={{typeIsReverse(type)}}>
                      <label>latitude</label><input type="text" value="{{latitude::change}}" style="width:80%;"><br/>
                      <label>longtitude</label><input type="text" value="{{longitude::change}}" style="width:80%;"><br/>
                  </template>
                      <label>size</label>
                      <div style="float:right;width:90%;">
                          <paper-slider min="1" max="40" step="1" value="{{size::change}}" editable style="height:20px;width:40%;"></paper-slider>
                     </div>
             </div>
            <div>
                  <geo-lookup url="{{url}}" type="{{type}}"
                            text="{{text}}" latitude="{{latitude}}"
                            longitude="{{longitude}}" size="{{size}}"></geo-lookup>
            </div>
        </template>
    </div>

  </body>
</html>

当定义在导入的文件

0 个答案: