Web Component templates (and Polymer)

Just to bookmark a thought, while watching
https://www.youtube.com/watch?v=8OJ7ih8EE7s

Web Components (a browser-based Web standards effort) has a data
binding / templates aspect.

http://webcomponents.org/
http://www.whatwg.org/specs/web-apps/current-work/multipage/scripting-1.html#the-template-element

Polymer adds a layer over the base specs,
http://www.polymer-project.org/docs/polymer/databinding.html

Here's an example:

<polymer-element name="greeting-tag">
  <!-- outermost template defines the element's shadow DOM -->
  <template>
    <ul>
      <template repeat="{{s in salutations}}">
        <li>{{s.what}}: <input type="text" value="{{s.who}}"></li>
      </template>
    </ul>
  </template>
  <script>
    Polymer('greeting-tag', {
      ready: function() {
        // populate the element’s data model
        // (the salutations array)
        this.salutations = [
          {what: 'Hello', who: 'World'},
          {what: 'GoodBye', who: 'DOM APIs'},
          {what: 'Hello', who: 'Declarative'},
          {what: 'GoodBye', who: 'Imperative'}
        ];
      }
    });
  </script>
</polymer-element>


I'm not sure what to conclude from this, but thought I'd pass this
along as a start.

Dan

Received on Friday, 27 June 2014 22:39:27 UTC