1

我有一个 Polymer 0.5 元素，主要用作库，我使用 mixins 将其注入到其他元素中。我将其格式化如下，所有 JSDoc 符号都显示在index.html：

<polymer-element name="easy-search-lib" attributes="">

  <template>

    <content></content>

  </template>

  <script>

    var EasySearch = {

      /**
       * Returns whether the given domain matches search.
       *
       * @method matches
       * @param {String} query String being searched for.
       * @param {String} text Text being searched within.
       * @return {Boolean} Returns if there is a match.
       */
      matches: function(query, text){
        query = this.getQuery(query);
        return query.test(text);
      }

      //...

    };

    Polymer(Polymer.mixin({

      /**
       * Convenience function for testing, binds EasySearch to Polymer element.
       *
       * @attribute EasySearch
       * @type object
       */
      EasySearch: EasySearch

    }, EasySearch));

  </script>

</polymer-element>

Polymer 1.0 用行为替换了 mixins，并给出了以下示例：

<script>
    HighlightBehavior = {

      properties: {
        isHighlighted: {
          type: Boolean,
          value: false,
          notify: true,
          observer: '_highlightChanged'
        }
      },

      listeners: {
        click: '_toggleHighlight'
      },

      created: function() {
        console.log('Highlighting for ', this, + 'enabled!');
      },

      _toggleHighlight: function() {
        this.isHighlighted = !this.isHighlighted;
      },

      _highlightChanged: function(value) {
        this.toggleClass('highlighted', value);
      }

    };
</script>

请注意，没有<dom-module id="highlight-behavior">norPolymer({...}) 元素声明。

我完全按照这个例子，但是当我访问 index.html 时什么都没有出现。所以我试着模仿我为 0.5 所做的事情： 

<script>

  var EasySearchLib = {

    EasySearch : {

      /**
       * Returns whether the given domain matches search.
       *
       * @method matches
       * @param {String} query String being searched for.
       * @param {String} text Text being searched within.
       * @return {Boolean} Returns if there is a match.
       */
      matches: function(query, text){
        query = this.getQuery(query);
        return query.test(text);
      }

      //...
     }
  };

  Polymer({

    is: 'easy-search-lib',

    properties: {

      /**
       * `fancy` indicates that the element should don a monocle and tophat,
       * while checking its pocket watch.
       */
      EasySearchLib: EasySearchLib
    }

  });

</script>

我还尝试声明属性分配 ( EasySearch: EasySearchLib.EasySearch) 的变体并输入 abehaviors: [EasySearchLib]但文档中没有显示任何内容。

在访问 index.html 时，获取行为/库文档的最佳方式是什么？

4

1 回答 1

2

把它放在你的行为对象定义之前：

/** @polymerBehavior */
var MyBehavior = {};

如果您将多个行为放在一个对象中，您可能会想要使用这个：

var EasySearchLib = {

  /** @polymerBehavior EasySearchLib.EasySearch */
  EasySearch: {}
}

或者，我处于类似的情况，我预先定义了我的命名空间对象：

var EasySearchLib = EasySearchLib || {};

在文档的开头，然后定义行为：

/** @polymerBehavior */
EasySearchLib.EasySearch = {};

这让解析器很容易推断出行为的名称。它还允许您将单个行为拆分为单独的文件并以任何顺序附加它们。

附加文档： http: //polymerelements.github.io/style-guide/#behaviors

于 2015-06-02T21:09:11.030 回答