todo demo

2016-05-15 20:42:09 +08:00 · 2016-05-15 20:42:09 +08:00 · d75d624991
parent 138fc9d88e
commit d75d624991
1 changed files with 37 additions and 0 deletions
--- a/example/todo0.html
+++ b/example/todo0.html
@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Todo</title>
+</head>
+<body>
+    <div id="container"></div>
+    <script src="../dist/nuclear.js"></script>
+    <script type="text/javascript">
+        var TodoApp = Nuclear.create({
+            add: function (evt) {
+                evt.preventDefault();
+                var textBox = this.node.querySelector('input');
+                this.option.items.push(textBox.value);
+            },
+            installed: function () {
+                var form = this.node.querySelector('form');
+                form.addEventListener('submit', this.add.bind(this), false);
+            },
+            render: function () {
+                return '<div>\
+                         <h3>TODO</h3>\
+                         <ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>\
+                          <form >\
+                           <input type="text"  />\
+                           <button>Add #{{items.length}}</button>\
+                         </form>\
+                        </div>';
+            }
+        });
+        new TodoApp( { items: [] },"#container");
+    </script>
+        <a href="https://github.com/AlloyTeam/Nuclear" target="_blank" style="position: absolute; right: 0; top: 0;">
+        <img src="../asset/github.png" alt="" />
+    </a>
+</body>
+</html>