Question

我有一个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用behaviors替换了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">也没有Polymer({...}) 元素宣言。

我完全按照这个例子，但是当我访问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）并投入behaviors: [EasySearchLib]，但文档中没有显示任何内容。

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

Answer 1

在行为对象定义之前加上它：

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

如果要在一个对象中放置多个行为，则可能需要使用它：

var EasySearchLib = {

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

或者，我处于类似的情况，我事先使用以下命令定义我的命名空间对象：

var EasySearchLib = EasySearchLib || {};

在文档的头部，然后使用以下内容定义行为：

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

这使得解析器可以非常轻松地推断出行为的名称。它还允许您将各个行为拆分为单独的文件，并以任何顺序附加它们。

其他文档：http://polymerelements.github.io/style-guide/#behaviors

在Polymer 1.0

1 个答案: