test/smoke/dom-bind.html

<!doctype html>
<html>
<head>

  <title>dom-bind</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="../../polymer.html">

</head>
<body>

  <template is="dom-bind" id="app">

    <h3>Repeat index</h3>
    <template is="dom-repeat" items="{{employees}}">
      <div style="padding: 3px 0px;">
        <button on-tap="modify">Modify</button>
        <span>{{index}}</span>
        <span>{{item.first}}</span>
        <span>{{item.last}}</span>
      </div>
    </template>

    <h3>Show person by index, demonstrate "dom-if" expressions</h3>
    <template is="dom-repeat" items="{{employees}}">
      <div>
        <template is="dom-if" if="{{testit(index)}}">
          <div style="padding: 3px 0px;">
            <button on-tap="modify">Modify</button>
            <span>{{index}}</span>
            <span>{{item.first}}</span>
            <span>{{item.last}}</span>
          </div>
        </template>
      </div>
    </template>

    <h3>Show person by index, demonstrate filter</h3>
    <template is="dom-repeat" items="{{employees}}" filter="onlyRob">
      <div>
        <div style="padding: 3px 0px;">
          <button on-tap="modify">Modify</button>
          <span>{{index}}</span>
          <span>{{item.first}}</span>
          <span>{{item.last}}</span>
        </div>
      </div>
    </template>

  </template>

  <script>
    var logEl = document.getElementById('log');
    var app = document.getElementById('app');
    app.testit = function(i) {
      return i > 1;
    };
    app.modify = function(e) {
      e.model.set('item.last', e.model.item.last + '*');
    };
    app.onlyRob = function(item) {
      return item.first == 'Rob';
    };
    app.bar = true;
    app.employees = [
      {first: 'Bob', last: 'Smith'},
      {first: 'Sally', last: 'Johnson'},
      {first: 'Rob', last: 'Instructs'},
      {first: 'Scott', last: 'Explains'},
      {first: 'Taylor', last: 'Blogs'}
    ];

  </script>

</body>
</html>