OLD | NEW |
(Empty) | |
| 1 |
| 2 <link rel="import" href="../components/polymer/polymer.html"> |
| 3 <link rel="import" href="../components/polymer-selector/polymer-selector.html"> |
| 4 <link rel="import" href="../components/flatiron-director/flatiron-director.html"
> |
| 5 <link rel="import" href="td-input.html"> |
| 6 <link rel="import" href="td-item.html"> |
| 7 |
| 8 <polymer-element name="td-todos" attributes="route modelId"> |
| 9 <template> |
| 10 <link rel="stylesheet" href="td-todos.css"> |
| 11 <flatiron-director route="{{route}}"></flatiron-director> |
| 12 <section id="todoapp"> |
| 13 <header id="header"> |
| 14 <input is="td-input" id="new-todo" placeholder="
What needs to be done?" autofocus on-td-input-commit="{{addTodoAction}}" on-td-i
nput-cancel="{{cancelAddTodoAction}}"> |
| 15 </header> |
| 16 <section id="main" hidden?="{{model.items.length == 0}}"
> |
| 17 <input id="toggle-all" type="checkbox" on-change
="{{toggleAllCompletedAction}}" checked="{{model.allCompleted}}"> |
| 18 <label for="toggle-all">Mark all as complete</la
bel> |
| 19 <ul id="todo-list" on-td-item-changed="{{itemCha
ngedAction}}" on-td-destroy-item="{{destroyItemAction}}"> |
| 20 <template repeat="{{model.filtered}}"> |
| 21 <li is="td-item" item="{{}}"></l
i> |
| 22 </template> |
| 23 </ul> |
| 24 </section> |
| 25 <footer id="footer" hidden?="{{model.items.length == 0}}
"> |
| 26 <span id="todo-count"><strong>{{model.activeCoun
t}}</strong> {{model.activeCount == 1 ? 'item' : 'items'}} left</span> |
| 27 <polymer-selector id="filters" selected="{{route
|| 'all'}}"> |
| 28 <li name="all"> |
| 29 <a href="../#/">All</a> |
| 30 </li> |
| 31 <li name="active"> |
| 32 <a href="../#/active">Active</a> |
| 33 </li> |
| 34 <li name="completed"> |
| 35 <a href="../#/completed">Complet
ed</a> |
| 36 </li> |
| 37 </polymer-selector> |
| 38 <button hidden?="{{model.completedCount == 0}}"
id="clear-completed" on-click="{{clearCompletedAction}}">Clear completed ({{mode
l.completedCount}})</button> |
| 39 </footer> |
| 40 </section> |
| 41 </template> |
| 42 |
| 43 <script> |
| 44 (function() { |
| 45 var ENTER_KEY = 13; |
| 46 var ESC_KEY = 27; |
| 47 Polymer('td-todos', { |
| 48 modelIdChanged: function() { |
| 49 this.model = document.querySelector('#'
+ this.modelId); |
| 50 }, |
| 51 routeChanged: function() { |
| 52 this.model && (this.model.filter = this.
route); |
| 53 }, |
| 54 addTodoAction: function() { |
| 55 this.model.newItem(this.$['new-todo'].va
lue); |
| 56 // when polyfilling Object.observe, make
sure we update immediately |
| 57 Platform.flush(); |
| 58 this.$['new-todo'].value = ''; |
| 59 }, |
| 60 cancelAddTodoAction: function() { |
| 61 this.$['new-todo'].value = ''; |
| 62 }, |
| 63 itemChangedAction: function() { |
| 64 this.model && this.model.itemsChanged(); |
| 65 }, |
| 66 destroyItemAction: function(e, detail) { |
| 67 this.model.destroyItem(detail); |
| 68 }, |
| 69 toggleAllCompletedAction: function(e, detail, se
nder) { |
| 70 this.model.setItemsCompleted(sender.chec
ked); |
| 71 }, |
| 72 clearCompletedAction: function() { |
| 73 this.model.clearItems(); |
| 74 } |
| 75 }); |
| 76 })(); |
| 77 </script> |
| 78 |
| 79 </polymer-element> |
OLD | NEW |