data-table-templatizer-behavior.html

<script>
  var saulis = window.saulis || {};

  /** @polymerBehavior */
  saulis.DataTableTemplatizerBehaviorImpl = {
    properties: {
      expanded: Boolean,
      index: Number,
      item: Object,
      selected: Boolean,
      table: Object,
      template: Object,

      //singleton
      _instances: {
        type: Array,
        value: []
      },

      //singleton
      _forwardedParentProps: {
        type: Object,
        value: {}
      },

      _instance: {
        type: Object,
        computed: '_templatize(template)'
      }
    },

    observers: [
      '_expandedChanged(_instance, expanded)',
      '_indexChanged(_instance, index)',
      '_itemChanged(_instance, item)',
      '_itemPathChanged(_instance, item.*)',
      '_selectedChanged(_instance, selected)'
    ],

    created: function() {
      this._instanceProps = {
        column: true,
        expanded: true,
        index: true,
        item: true,
        selected: true
      };
    },

    _templatize: function(template) {
      this.templatize(template);

      // fix _rootDataHost to the context where template has been defined
      if (template._rootDataHost) {
        this._getRootDataHost = function() { return template._rootDataHost; };
      }

      var instance = this.stamp({});


      // initializing new template instance with previously forwarded parent props.
      // could be done with observers, but this is simpler.
      for (var key in this._forwardedParentProps) {
        instance[key] = this._forwardedParentProps[key];
      }
      this._instances.push(instance);

      Polymer.dom(this).insertBefore(instance.root, Polymer.dom(this).firstElementChild);

      return instance;
    },

    _expandedChanged: function(instance, expanded) {
      // store original expanded value to detect when value change has
      // originated from within the template.
      this._expanded = expanded;

      instance.expanded = expanded;
    },

    _indexChanged: function(instance, index) {
      instance.index = index;
    },

    _itemChanged: function(instance, item) {
      instance.item = item;
    },

    _itemPathChanged: function(instance, item) {
      // TODO: hack to avoid: https://github.com/Polymer/polymer/issues/3307
      this._parentProps = this._parentProps || {};

      instance.notifyPath(item.path, item.value);
    },

    _selectedChanged: function(instance, selected) {
      // store original selected value to detect when value change has
      // originated from within the template.
      this._selected = selected;

      instance.selected = selected;
    },

    /** templatizer */
    _forwardParentProp: function(prop, value) {
      // store props to initialize new instances.
      this._forwardedParentProps[prop] = value;

      //TODO: Bug in Polymer, seems to two-way bind any parent property only
      //to the last template instance created. We need to push the property
      //to all instances manually.
      this._instances.forEach(function(inst) {
        inst[prop] = value;
      });
    },

    _forwardInstanceProp: function(inst, prop, value) {
      if (prop === 'expanded' && inst.item && this._expanded !== value) {
        if (value) {
          this.table.expandItem(inst.item);
        } else {
          this.table.collapseItem(inst.item);
        }
      }

      if (prop === 'selected' && inst.item && this._selected !== value) {
        if (value) {
          this.table.selectItem(inst.item);
        } else {
          this.table.deselectItem(inst.item);
        }
      }
    },

    _forwardInstancePath: function(inst, path, value) {
      if (path.indexOf('item') === 0) {
        // instance.notifyPath above will call _forwardInstancePath recursively,
        // so need to debounce to avoid firing the same event multiple times.
        this.table.debounce('item-changed', function() {
          // stripping 'item.' from path.
          this.table.fire('item-changed', {item: inst.item, path: path.substring(5), value: value});
        }.bind(this));
      }
    }
  };

  /** @polymerBehavior */
  saulis.DataTableTemplatizerBehavior =
    [Polymer.Templatizer, saulis.DataTableTemplatizerBehaviorImpl];
</script>