polymerpolymer-2.xpolymer-3.x

What is the 'behavior' counterpart of Polymer 1.x in polymer 3.x


I am translating behavior component from Polymer 1.x to Polymer 3.x. My concern is how to translate my bevaior class to be used in Polymer 3 application. The test code follows below here:

PermissionsBehaviour =
{
    ready: function ()
    {
        var _th = this;
        this._getRoles().then(function (d)
        {
            _th.set('perms_roles', d);          
        });
    },

    properties:
    {
         perms_roles: { type: Array, value: [] },          
    },

    _getRoles: function ()
    {
        return $.get(Global.Settings.RootWebUrl +                                                     
                       "Permission/GetUserRoles", function (result) { });
    }
}

Solution

  • You can define it as mixin in Polymer 3: https://polymer-library.polymer-project.org/3.0/docs/devguide/custom-elements#defining-mixins

    import {dedupingMixin} from '@polymer/polymer/lib/utils/mixin.js';
    
    let internalMyMixin = function(superClass) {
      return class extends superClass {
        constructor() {
          super();
          this.addEventListener('keypress', (e) => this._handlePress(e));
        }
    
        static get properties() {
          return {
            bar: {
              type: Object
            }
          };
        }
    
        static get observers() {
          return [ '_barChanged(bar.*)' ];
        }
    
        _barChanged(bar) { ... }
    
        _handlePress(e) { console.log('key pressed: ' + e.charCode); }
      }
    }
    
    const MyMixin = dedupingMixin(internalMyMixin);
    export {MyMixin as default};
    

    And then use the mixin as follows:

    import {MyMixin} from './my-mixin.js';
    
    class Foo extends MyMixin(PolymerElement) { ... }