x-template notes

x-template

Define template off in HTMLImports fragments

When template parsed search through main doc and render templates for all elements that are using this temaplate.  Event delegation is setup on window for all events from addTemplateListers

  <template name="bar" is="x-template">
    <div>
      <div></div>
      <ul></ul>
      <button data-action="save">
    </div>
    <script>
      // when does this execute and what is the scope???
      var self = this;
// scope ???
      this.template.addListeners({
        'click:delegate(button[data-action="save"])': function(e, template){
          // what is this?  templated element, template, or button?
          e.currentTarget.template  ??
          e.template.updateValue('date', new Date())
          self.updateValue('name', new Date());
          // this will do a reverse lookup of the map and call
          // the tag.attribute['username'] setter & attribute but don't SYNC to children elements
          // Do not call the setter on the element b/c it will cause an infinite loop
        }
      });
      this.propertyUpdateMap({
        'name': function(el, value){

        },
        'name:select(div:first-child):': function(el, value){
          el.innerHTML = value;
        },
        'name:select(div:first-child)':function(el, value){
          el.setAttribute('data-name', value);
        },
        'replies:select(ul):template(post)':function(element, item){
          element.appendChild(item);
         }
      });
    </script>
  </template>

Define an element that uses a template
  <x-foo template="bar">
  Fire template change event when created template is set, this will cause the template to render

  When template renders it need to look at its map to find out which properties "getters" need to be called to get the data.

  It will iterate over the "updateMap" getting each value to render that part of the template

  clone content, run updateMap, then inject

If a custom elements properties do not align with a templates keys, then the user of the template needs to create a mapping.

Each time the propertyMap runs we need to rerender the elements.. OROROR  just loop over the updateMap again

document.querySelector('template[name="bar"]').propertyMap({
  'x-foo':{
    'username': 'name',
    'posts': {
      key: 'replies',
      action: function(element,value){
        // only show top 5
        var top5 = value.slice(0,4);
        // do some rework of value and return the updated one
        return top5.map(function(item){
          item.replyTo = element.name;
        });
      }
    }
  }
});