simple server side rendering demo

2016-05-22 08:45:37 +08:00 · 2016-05-22 08:45:37 +08:00 · 2dd19ae6d0
parent b403e6dbbf
commit 2dd19ae6d0
5 changed files with 2777 additions and 0 deletions
--- a/server_rendering/app.js
+++ b/server_rendering/app.js
@ -0,0 +1,25 @@
+var koa = require('koa');
+var serve = require('koa-static');
+var router = require('koa-route');
+var app = koa();
+var jsdom = require('jsdom');
+var Nuclear = require("alloynuclear")(jsdom.jsdom().defaultView);
+
+var Todo = require('./component/todo')(Nuclear,true);
+
+var ejs = require('ejs');
+
+
+app.use(serve(__dirname + '/component'));
+
+app.use(router.get('/todos', function *(){
+    var  str = require('fs').readFileSync(__dirname + '/view/index.html', 'utf8');
+    var todo = new Todo({ items: ["Nuclear","koa",'ejs'] });
+    this.body =  ejs.render(str, {
+        todo:  todo.HTML
+    });
+    Nuclear.destroy(todo);
+}));
+
+
+app.listen(3000);
--- a/server_rendering/component/nuclear.js
+++ b/server_rendering/component/nuclear.js
--- a/server_rendering/component/todo.js
+++ b/server_rendering/component/todo.js
@ -0,0 +1,31 @@
+function todo(Nuclear,server) {
+    var Todo = Nuclear.create({
+        add: function (evt) {
+            evt.preventDefault();
+            this.option.items.push(this.textBox.value);
+        },
+        render: function () {
+            return `<div>
+                      <h3>TODO</h3>
+                      <ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>
+                      <form onsubmit="add(event)" >
+                          <input nc-id="textBox" type="text"  />
+                          <button>Add #{{items.length}}</button>
+                      </form>
+                    </div>`;
+        },
+        style: function () {
+            return `h3 { color:red; }
+                   button{ color:green;}`;
+        }
+    },{
+        server:server
+    });
+    return Todo;
+}
+
+if ( typeof module === "object" && typeof module.exports === "object" ) {
+    module.exports =  todo ;
+} else {
+    this.todo = todo;
+}
--- a/server_rendering/package.json
+++ b/server_rendering/package.json
@ -0,0 +1,11 @@
+{
+  "private": true,
+  "dependencies": {
+    "alloynuclear": "^0.2.12",
+    "ejs": "latest",
+    "koa": "latest",
+    "koa-route": "latest",
+    "jsdom":"latest",
+    "koa-static": "latest"
+  }
+}
--- a/server_rendering/view/index.html
+++ b/server_rendering/view/index.html
@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title></title>
+</head>
+<body>
+ <div id="todo"><%- todo%></div>
+
+ <div id="aa"></div>
+ <script src="./nuclear.js"></script>
+ <script src="./todo.js"></script>
+ <script>
+
+   var Todo= todo(Nuclear);
+    //绑定事件、处理样式
+    new Todo('#todo');
+ </script>
+</body>
+</html>