Commit 24680e58 authored by Eric Bidelman's avatar Eric Bidelman

Feedback

parent 175cff47
...@@ -2,34 +2,33 @@ ...@@ -2,34 +2,33 @@
> Polymer is a new type of library for the web, built on top of Web Components, and designed to leverage the evolving web platform on modern browsers. > Polymer is a new type of library for the web, built on top of Web Components, and designed to leverage the evolving web platform on modern browsers.
> _[Polymer - www.polymer-project.org](http://www.polymer-project.org/)_ > _[Polymer - www.polymer-project.org](https://www.polymer-project.org/)_
## Learning Polymer ## Learning Polymer
The [Polymer website](http://www.polymer-project.org) is a great resource for getting started. The [Polymer website](https://www.polymer-project.org) is a great resource for getting started.
Here are some links you may find helpful: Here are some links you may find helpful:
* [Getting Started](http://www.polymer-project.org/docs/start/everything.html) * [Getting Started](https://www.polymer-project.org/1.0/docs/start/getting-the-code.html)
* [FAQ](http://www.polymer-project.org/resources/faq.html) * [FAQ](https://www.polymer-project.org/0.5/resources/faq.html) (old)
* [Browser Compatibility](http://www.polymer-project.org/resources/compatibility.html) * [Browser Compatibility](https://www.polymer-project.org/1.0/resources/compatibility.html)
Get help from Polymer devs and users: Get help from Polymer devs and users:
* Find us on IRC on __#polymer__ at freenode. * Find us Slack - polymer.slack.com
* Join the high-traffic [polymer-dev](https://groups.google.com/forum/?fromgroups=#!forum/polymer-dev) Google group or the announcement-only [polymer-announce](https://groups.google.com/forum/?fromgroups=#!forum/polymer-announce) Google group. * Join the high-traffic [polymer-dev](https://groups.google.com/forum/?fromgroups=#!forum/polymer-dev) Google group or the announcement-only [polymer-announce](https://groups.google.com/forum/?fromgroups=#!forum/polymer-announce) Google group.
## Implementation ## Implementation
The Polymer implementation of TodoMVC has a few key differences with other implementations: The Polymer implementation of TodoMVC has a few key differences with other implementations:
* Since [Web Components](http://w3c.github.io/webcomponents/explainer/) allow you to create new types of DOM elements, the DOM tree is very different from other implementations. * [Web Components](http://w3c.github.io/webcomponents/explainer/) allow you to create new HTML elements that are reusable, composable, and encapsulated.
* The template, styling, and behavior are fully encapsulated in each custom element. Instead of having an overall stylesheet (`base.css` or `app.css`), each element that needs styling has its own stylesheet. * Non-visual elements such as the router and the model are also implemented as custom elements and appear in the DOM. Implementing them as custom elements instead of plain objects allows you to take advantage of Polymer's data binding and event handling throughout the app.
* Non-visual elements such as the router and the model are also implemented as custom elements and appear in the DOM. Implementing them as custom elements instead of plain objects allows you to take advantage of Polymer data binding and event handling throughout the app.
## Compatibility ## Compatibility
Polymer and its polyfills are intended to work in the latest version of [evergreen browsers](http://tomdale.net/2013/05/evergreen-browsers/). IE9 is not supported. Please refer to [Browser Compatibility](http://www.polymer-project.org/resources/compatibility.html) for more details. Polymer and the web component polyfills are intended to work in the latest version of [evergreen browsers](http://tomdale.net/2013/05/evergreen-browsers/). IE9 is not supported. Please refer to [Browser Compatibility](https://www.polymer-project.org/1.0/resources/compatibility.html) for more details.
## Running this sample ## Running this sample
...@@ -42,3 +41,11 @@ Polymer and its polyfills are intended to work in the latest version of [evergre ...@@ -42,3 +41,11 @@ Polymer and its polyfills are intended to work in the latest version of [evergre
`python -m SimpleHTTPServer` `python -m SimpleHTTPServer`
1. Browse to the server root 1. Browse to the server root
## Making updates
If you want to make a change to any of the elements in elements/elements.html, you'll need to install `polybuild` (Polymer's build tool) and re-vulcanize elements.build.html.
1. Run `npm install`
1. Make a change
2. Run `npm run build`
<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="../bower_components/polymer/polymer.html">
<script> <script>
(function() { (function () {
'use strict'; 'use strict';
var ENTER_KEY = 13; var ENTER_KEY = 13;
......
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
</template> </template>
</template> </template>
<script> <script>
(function() { (function () {
'use strict'; 'use strict';
Polymer({ Polymer({
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
}, },
item: { item: {
type: Object, type: Object,
value: function() { return {}; } value: function () { return {}; }
}, },
}, },
...@@ -48,21 +48,21 @@ ...@@ -48,21 +48,21 @@
this.toggleClass('editing', editing); this.toggleClass('editing', editing);
}, },
_onBlur: function() { _onBlur: function () {
this._commitAction(); this._commitAction();
this.editing = false; this.editing = false;
}, },
_editAction: function() { _editAction: function () {
this.editing = true; this.editing = true;
this._editingValue = this.item.title; this._editingValue = this.item.title;
// Wait one tick template to stamp. // Wait one tick template to stamp.
this.async(function() { this.async(function () {
this.querySelector('#edit').focus(); this.querySelector('#edit').focus();
}); });
}, },
_commitAction: function() { _commitAction: function () {
if (this.editing) { if (this.editing) {
this.editing = false; this.editing = false;
this.set('item.title', this._editingValue.trim()); this.set('item.title', this._editingValue.trim());
...@@ -72,11 +72,11 @@ ...@@ -72,11 +72,11 @@
} }
}, },
_cancelAction: function() { _cancelAction: function () {
this.editing = false; this.editing = false;
}, },
_destroyAction: function() { _destroyAction: function () {
this.fire('td-destroy-item', this.item); this.fire('td-destroy-item', this.item);
} }
}); });
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
on-iron-localstorage-load-empty="_initializeDefaultTodos"></iron-localstorage> on-iron-localstorage-load-empty="_initializeDefaultTodos"></iron-localstorage>
</template> </template>
<script> <script>
(function() { (function () {
'use strict'; 'use strict';
Polymer({ Polymer({
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
} }
}, },
_initializeDefaultTodos: function() { _initializeDefaultTodos: function () {
this.items = []; this.items = [];
}, },
...@@ -41,11 +41,11 @@ ...@@ -41,11 +41,11 @@
this.push('items', {title: title, completed: false}); this.push('items', {title: title, completed: false});
}, },
getCompletedCount: function() { getCompletedCount: function () {
return this.items ? this.items.filter(this.filters.completed).length : 0; return this.items ? this.items.filter(this.filters.completed).length : 0;
}, },
getActiveCount: function() { getActiveCount: function () {
return this.items.length - this.getCompletedCount(this.items); return this.items.length - this.getCompletedCount(this.items);
}, },
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
} }
}, },
clearCompletedItems: function() { clearCompletedItems: function () {
this.items = this.items.filter(this.filters.active); this.items = this.items.filter(this.filters.active);
}, },
......
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
</section> </section>
</template> </template>
<script> <script>
(function() { (function () {
'use strict'; 'use strict';
Polymer({ Polymer({
...@@ -95,7 +95,7 @@ ...@@ -95,7 +95,7 @@
} }
}, },
attached: function() { attached: function () {
this.model = document.querySelector('#' + this.modelId); this.model = document.querySelector('#' + this.modelId);
}, },
...@@ -125,12 +125,12 @@ ...@@ -125,12 +125,12 @@
}.bind(this); }.bind(this);
}, },
addTodoAction: function() { addTodoAction: function () {
this.model.newItem(this.$['new-todo'].value); this.model.newItem(this.$['new-todo'].value);
this.$['new-todo'].value = ''; this.$['new-todo'].value = '';
}, },
cancelAddTodoAction: function() { cancelAddTodoAction: function () {
this.$['new-todo'].value = ''; this.$['new-todo'].value = '';
}, },
...@@ -142,7 +142,7 @@ ...@@ -142,7 +142,7 @@
this.model.setItemsCompleted(e.target.checked); this.model.setItemsCompleted(e.target.checked);
}, },
clearCompletedAction: function() { clearCompletedAction: function () {
this.model.clearCompletedItems(); this.model.clearCompletedItems();
} }
}); });
......
{ {
"name": "polymer-todomvc", "private": true,
"version": "1.0.0",
"description": "Polymer TodoMVC demo",
"main": "index.html",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1" "postinstall": "npm run build",
"build": "polybuild --maximum-crush elements/elements.html"
}, },
"repository": {
"type": "git",
"url": "https://github.com/tastejs/todomvc"
},
"keywords": [
"polymer",
"todomvc"
],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/tastejs/todomvc/issues"
},
"homepage": "https://github.com/tastejs/todomvc",
"devDependencies": { "devDependencies": {
"polybuild": "^1.0.5" "polybuild": "^1.0.5"
} }
......
#!/bin/sh
# vulcanize elements.html \
# --inline-script --inline-css --strip-comments | \
# crisper -h elements.build.html -j elements.build.js
polybuild --maximum-crush elements/elements.html
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment