Polymer 2 App

by Viktor Lukashov

HTML

<base href="https://polygit.org/vaadin-checkbox+vaadin+v2.0.0-beta1/components/">
<script src="webcomponentsjs/webcomponents-loader.js"></script>

<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="polymer/lib/elements/dom-repeat.html">
<link rel="import" href="vaadin-checkbox/vaadin-checkbox.html">

<dom-module id="my-app">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    
    <template is="dom-repeat" items="[[items]]">
      <div>
        <button on-click="_selectItem">Select</button>
        <vaadin-checkbox id=[[item.id]] disabled="true" checked="[[item.checked]]">
          [[item.description]]
        </vaadin-checkbox>
      </div>
    </template>
  </template>
</dom-module>

<my-app></my-app>

JavaScript

window.addEventListener('WebComponentsReady', () => {
    class MyApp extends Polymer.Element {
      static get is() { return 'my-app'; }
      static get properties() {
        return {
          items: {
            type: Array,
            notify: true,
            value: function () {
              return [
                { id: 1, description: 'first', checked: true },
                { id: 2, description: 'second', checked: false },
                { id: 3, description: 'third', checked: false }
              ];
            }
          }
        };
      }

      _selectItem(event) {
        const item = event.model.item;
        this.set(`items.${event.model.index}.checked`, !item.checked);
      }
    }

    window.customElements.define(MyApp.is, MyApp);
});