Vaadin Grid subproperty observer

by Sergey Kulikov

HTML

<base href="https://polygit.org/vaadin-grid+vaadin+^5.0.0/vaadin-text-field+vaadin+^2.0.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer-element.html">
  <link rel="import" href="vaadin-grid/vaadin-grid.html">
  <link rel="import" href="vaadin-text-field/vaadin-text-field.html">

  <dom-module id="x-grid">
    <template>
      <style>
        :host {
          display: block;
        }
      </style>

      <vaadin-grid items="{{_cartItems}}">
      
        <vaadin-grid-column>
          <template>[[item.name]]</template>
        </vaadin-grid-column>      

        <vaadin-grid-column>
          <template class="header">Quantity</template>
          <template><vaadin-text-field value="{{item.quantity}}"></vaadin-text-field></template>
        </vaadin-grid-column>
        
        <vaadin-grid-column>
          <template>[[item.price]]</template>
          <template class="footer">Subtotal [[_cartTotal(_cartItems.*)]]€</template>
        </vaadin-grid-column>


      </vaadin-grid>


    </template>
    <script>
      window.addEventListener('WebComponentsReady', () => {
        class XGrid extends Polymer.Element {

          static get is() {
            return 'x-grid';
          }
          
          static get properties() {
            return {
              _cartItems: {
                type: Array,
                value: function () {
                  return [
                    {
                      "name": "Stickers",
                      "quantity": 10,
                      "price": 0.50
                    },
                    {
                      "name": "Laptop",
                      "quantity": 1,
                      "price": 1337
                    }
                  ]
                }
              }
            }
          }
        
          _cartTotal(cartContents) {
            let sum = 0;
            if (cartContents != null) {
             ...