Home Reference Source Repository

backed NPM version Build Status Dependency Status Coverage percentage

Small web framework for quick app & component development

Features

Installation

$ bower install --save backed
$ npm install --save backed

Usage

Basic usage

Backed(class extends HTMLElement {
  ready() {
    // ready to go ...
  }
});

Using observers

Backed(class extends HTMLElement {
  static get properties() {
    return {
      name: {
        observer: 'change'
      }
    }
  }
  ready() {
    // ready to go ...
  }
  change(change) {
    console.log(change);
  }
});

Using reflect

Backed(class extends HTMLElement {
  static get properties() {
    return {
      name: {
        reflect: true
      }
    }
  }
  ready() {
    // ready to go ...
  }
});

Using render

Backed(class extends HTMLElement {
  static get properties() {
    return {
      name: {
        render: true,
        value: 'name should go here'
      },      
      lastname: {
        render: true
        value: 'lastname should go here'
      }
    }
  }
  render() {
    html`
      <style></style>
      <h1>${this.name}</h1>
      <h2>${this.lastname}</h2>
    `
  }
});

or

warning: watch out when using multiple renderers, when doing this the element will have the templateResult of the last render

Backed(class extends HTMLElement {
  static get properties() {
    return {
      name: {
        render: 'renderName'
      }
    }
  }
  renderName() {
    html`
      <style></style>
      <h1>${this.name}</h1>
    `
  }
});

More info

Roadmap

TODO

License

CC-BY-NC-ND-4.0 © Glenn Vandeuren