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) { });
}
}
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) { ... }