Documenting library/mixin/behaviors elements in Polymer 1.0 -
i had polymer 0.5 element used library injected other elements using mixins. formatted followed , of jsdoc notation showed in index.html
:
<polymer-element name="easy-search-lib" attributes=""> <template> <content></content> </template> <script> var easysearch = { /** * returns whether 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 match. */ matches: function(query, text){ query = this.getquery(query); return query.test(text); } //... }; polymer(polymer.mixin({ /** * convenience function testing, binds easysearch polymer element. * * @attribute easysearch * @type object */ easysearch: easysearch }, easysearch)); </script> </polymer-element>
polymer 1.0 replaced mixins behaviors , gives following example:
<script> highlightbehavior = { properties: { ishighlighted: { type: boolean, value: false, notify: true, observer: '_highlightchanged' } }, listeners: { click: '_togglehighlight' }, created: function() { console.log('highlighting ', this, + 'enabled!'); }, _togglehighlight: function() { this.ishighlighted = !this.ishighlighted; }, _highlightchanged: function(value) { this.toggleclass('highlighted', value); } }; </script>
note there no <dom-module id="highlight-behavior">
nor polymer({...})
element declaration.
i followed example exactly, nothing showed when visited index.html. tried emulating had done 0.5:
<script> var easysearchlib = { easysearch : { /** * returns whether 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 match. */ matches: function(query, text){ query = this.getquery(query); return query.test(text); } //... } }; polymer({ is: 'easy-search-lib', properties: { /** * `fancy` indicates element should don monocle , tophat, * while checking pocket watch. */ easysearchlib: easysearchlib } }); </script>
i tried declaring variations of attribute assignment (easysearch: easysearchlib.easysearch
) , throwing in behaviors: [easysearchlib]
nothing shows in documentation.
what's best way of getting documentation behaviors/libraries show when visiting index.html?
put before behavior object definition:
/** @polymerbehavior */ var mybehavior = {};
if putting multiple behaviors in 1 object, want use this:
var easysearchlib = { /** @polymerbehavior easysearchlib.easysearch */ easysearch: {} }
alternatively, in similar situation define namespace object beforehand with:
var easysearchlib = easysearchlib || {};
at head of document, define behavior with:
/** @polymerbehavior */ easysearchlib.easysearch = {};
this lets parser infer name of behavior pretty easily. allows split individual behaviors separate files , attach them in order.
additional documentation: http://polymerelements.github.io/style-guide/#behaviors
Comments
Post a Comment