Update TodoMVC based on https://github.com/polymer/todomvc

samples/third_party/todomvc/web/elements/td_model.dart

+library todomvc.web.elements.td_model;
+
+import 'dart:html';
+import 'package:polymer/polymer.dart';
+import '../lib-elements/polymer_localstorage.dart';
+
+class Todo extends Observable {
+  @observable String title;
+  @observable bool completed = false;
+
+  Todo(this.title);
+
+  Todo.fromJson(Map json)
+      : title = json['title'], completed = json['completed'];
+
+  Map toJson() => { 'title': title, 'completed': completed };
+
+  String toString() => "$title (${completed ? '' : 'not '}done)";
+}
+
+@CustomTag('td-model')
+class TodoModel extends PolymerElement {
+  @observable ObservableList<Todo> items;

[Siggi Cherem (dart-lang), 2013/11/07 02:12:47]

should we use @published for the few attributes that are visible? (items,
filter, storatgeId)?

[Jennifer Messerly, 2013/11/07 04:27:36]

yeah, I wondered that too. Polymer-js version isn't using "publish" for any of
these. But it seems a lot nicer -- less boilerplate. (especially if we rename it
to @attribute)

+  @observable Iterable<Todo> filtered;
+  @observable int completedCount = 0;
+  @observable int activeCount = 0;
+  @observable bool allCompleted = false;
+  @observable String storageId;
+  @observable PolymerLocalStorage storage;
+  @observable String filter;
+  @observable String activeItemWord;
+
+  final filters = {
+    'active': (item) => !item.completed,
+    'completed': (item) => item.completed
+  };
+
+  factory TodoModel() => new Element.tag('td-model');
+  TodoModel.created() : super.created();
+
+  void ready() {
+    async((_) {
+      if (items == null) items = new ObservableList<Todo>();
+    });
+  }
+
+  void filterChanged() {
+    filterItems();
+  }
+
+  void itemsChanged() {
+    completedCount = items.where(filters['completed']).length;
+    activeCount = items.length - completedCount;
+    allCompleted = completedCount > 0 && activeCount == 0;
+
+    filterItems();
+    if (storage != null) {
+      storage.value = items;
+      storage.save();
+    }
+
+    // TODO(jmesserly): polymer_expressions lacks ternary operator.
+    activeItemWord = activeCount == 1 ? 'item' : 'items';
+  }
+
+  void storageIdChanged() {
+    storage = document.querySelector('#$storageId');
+    if (storage != null && storage.value != null) {
+      items = toObservable(storage.value.map((i) => new Todo.fromJson(i)));
+    }
+  }
+
+  void filterItems() {
+    var fn = filters[filter];
+    filtered = fn != null ? items.where(fn) : items;
+  }
+
+  void newItem(String title) {
+    title = title.trim();
+    if (title != '') {
+      items.add(new Todo(title));
+      itemsChanged();
+    }
+  }
+
+  void destroyItem(Todo item) {
+    if (items.remove(item)) itemsChanged();
+  }
+
+  void clearItems() {
+    items.removeWhere(filters['completed']);
+  }
+
+  void setItemsCompleted(bool completed) {
+    for (var item in items) {
+      item.completed = completed;
+    }
+    itemsChanged();
+  }
+}