Merge branch 'develop'

alexzhaosheng · Jul 13, 2015 · e7841e3 · e7841e3
2 parents 8998ff3 + 07bf399
commit e7841e3
Show file tree

Hide file tree

Showing 60 changed files with 4,156 additions and 1,178 deletions.
diff --git a/example/bookstore.html b/example/bookstore.html
@@ -0,0 +1,105 @@
+<!doctype html>
+<html>
+<head>
+    <title>Knot.js Example - Bookstore</title>
+    <link rel="stylesheet" href="styles/example.css">
+
+    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+
+    <link rel="stylesheet" href="./styles/github.css">
+    <script src="js/highlight.pack"></script>
+
+    <link rel="stylesheet" href="styles/tabpage.css">
+    <script type="text/cbs" src="cbs/tabpage.pkg.cbs"></script>
+    <script type="text/cbs" src="cbs/sourceTab.pkg.cbs"></script>
+
+
+    <script src="../src/core/PrivateScope.js"></script>
+    <script src="../src/core/Utility.js"></script>
+    <script src="../src/core/Deferred.js"></script>
+    <script src="../src/core/AttachedData.js"></script>
+    <script src="../src/core/DataObserver.js"></script>
+    <script src="../src/core/ArrayMonitor.js"></script>
+    <script src="../src/core/GlobalSymbolHelper.js"></script>
+    <script src="../src/core/OptionParser.js"></script>
+    <script src="../src/core/KnotManager.js"></script>
+    <script src="../src/core/CBSLoader.js"></script>
+    <script src="../src/core/HTMLAPProvider.js"></script>
+    <script src="../src/core/HTMLKnotBuilder.js"></script>
+    <script src="../src/core/AddonHTMLAPProvider.js"></script>
+    <script src="../src/core/ComponentAPProvider.js"></script>
+    <script src="../src/core/WindowHashStatus.js"></script>
+    <script src="../src/core/KnotInterface.js"></script>
+
+    <link rel="stylesheet" href="styles/tabpage.css">
+    <script type="text/cbs" src="cbs/tabpage.pkg.cbs"></script>
+    <script type="text/cbs" src="cbs/sourceTab.pkg.cbs"></script>
+    <script src="js/tabpage.js" id="tabPageSource"></script>
+    <script type="text/javascript" src="js/sourceTab.js"></script>
+
+    <script src="../src/debugger/knot.debug.js"></script>
+
+    <link rel="stylesheet" href="styles/bookstore.css" class="exampleCSS">
+    <script src="js/bookstore.js" class="exampleJS"></script>
+    <script type="text/cbs" src="cbs/bookstore.cbs" class="exampleCBS"></script>
+
+</head>
+<body>
+
+<section class="knot_example">
+    <h2>Knot.js example - Bookstore</h2>
+    <b>All of the text and images are from Amazon.com</b>
+
+    <div id="navMenu">
+        <ul>
+            <li knot-template></li>
+        </ul>
+    </div>
+
+    <div id="contentContainer"></div>
+
+    <div id="booksList" knot-template-id="bookListTemplate">
+    <ul>
+        <li knot-template>
+            <img>
+            <div></div>
+        </li>
+    </ul>
+    </div>
+
+    <div id="bookDetails" knot-template-id="bookDetailsTemplate">
+        <div>
+        <h2></h2>
+        <img>
+        <p></p>
+        <button>Return</button>
+        </div>
+    </div>
+</section>
+
+
+<div id="sourceTab" knot-debugger-ignore  knot-component="SourceTabPage">
+
+</div>
+<script type="text/cbs">
+        #sourceTab{
+            sourceInfo:/sourceCodeInfo.codes
+        }
+    </script>
+<script>
+    //collect source codes before knot changes the HTML
+    window.sourceCodeInfo = {codes:null};
+
+    window.SourceCodeHelper.collectSourceCodes(
+            [{selector:".knot_example",title:"HTML", type:"html"},
+                {selector:".exampleJS",title:"Javascript", type:"javascript"},
+                {selector:".exampleCBS",title:"CBS", type:"cbs"},
+                {selector:".exampleCSS",title:"CSS", type:"css"}],
+            function(res){
+                window.sourceCodeInfo.codes = res;
+            });
+</script>
+</body>
+</div>
+</body>
+</html>
diff --git a/example/cbs/bookstore.cbs b/example/cbs/bookstore.cbs
@@ -0,0 +1,63 @@
+
+/bookStoreModel{
+    selected <= ($hash.category & $hash.book & /bookStoreModel.categories) > @/bookStoreModel.getSelected;
+}
+
+
+body{
+    dataContext: /bookStoreModel;
+}
+#navMenu>ul{
+    foreach: categories;
+
+    -> >li{
+        text: name;
+        @click: @{
+                Knot.setKnotVariant("$hash.category", this.id);
+                Knot.setKnotVariant("$hash.book", null);
+            };
+        class: (/bookStoreModel.selected.category && *LEFT)>{return value[0]===value[1]?"+selected":"-selected";}
+    }
+}
+
+#booksList>ul{
+    dataContext: category;
+
+    foreach: items;
+
+    -> >li{
+        @click: @{Knot.setKnotVariant("$hash.book", this.id);};
+
+        -> img{
+            src: cover
+        };
+        -> div{
+            text: name
+        };
+    }
+}
+
+#bookDetails>div{
+    dataContext: book;
+
+    -> h2{
+        text: name
+    };
+
+    -> img{
+        src: cover
+    };
+
+    -> p{
+        innerHTML: intro
+    };
+
+    -> button{
+        @click: @{Knot.setKnotVariant("$hash.book", null);};
+    }
+}
+
+
+#contentContainer{
+    content[templateSelector: @/bookStoreModel.contentTemplateSelector]: selected
+}