ax5core 0.9.0

ax5ui · Feb 8, 2016 · 25850a8 · 25850a8
1 parent f4912de
commit 25850a8
Show file tree

Hide file tree

Showing 7 changed files with 172 additions and 26 deletions.
diff --git a/API-ax5-mustache.md b/API-ax5-mustache.md
@@ -0,0 +1,82 @@
+# ax5.mustache
+
+> "ax5.mustache" is a modified version of the in the "https://github.com/janl/mustache.js", some of the syntax.
+
+## ax5.mustache.render
+`ax5.mustache.render(tmpl, view)`
+
+```js
+var view = {
+  title: "Joe",
+  calc: function () {
+    return 2 + 4;
+  }
+};
+
+var output = ax5.mustache.render("{{title}} spends {{calc}}", view);
+```
+Please refer to the `mustache` API is about the template.
+this version added only a few of the key and function in the `mustache`.
+[Mustache API](https://github.com/janl/mustache.js/blob/master/README.md)
+You can use all of the API of `mustache` in the same way. I will introduce the features added in the `ax5.mustache` below.
+
+
+## Array
+
+View:
+```js
+{
+  "beatles": [
+    { "firstName": "John", "lastName": "Lennon" },
+    { "firstName": "Paul", "lastName": "McCartney" },
+    { "firstName": "George", "lastName": "Harrison" },
+    { "firstName": "Ringo", "lastName": "Star" }
+  ]
+}
+```
+
+Template:
+```
+{{#beatles}}
+* {{firstName}} {{lastName}} ({{@i}}) ({{@first}})
+{{/beatles}}
+```
+
+Output:
+```
+* John Lennon (0) (true)
+* Paul McCartney (1) (false)
+* George Harrison (2) (false)
+* Ringo Star (3) (false)
+```
+
+## Object.getEach
+
+View:
+```js
+{
+    "beatles": {
+        "John": {"firstName": "John", "lastName": "Lennon"},
+        "Paul": {"firstName": "Paul", "lastName": "McCartney"},
+        "George": {"firstName": "George", "lastName": "Harrison"},
+        "Ringo": {"firstName": "Ringo", "lastName": "Star"}
+    }
+}
+```
+
+Template:
+```
+{{#beatles}}
+    {{#getEach}}
+    * {{@key}} : {{@value.firstName}} {{@value.lastName}}
+    {{/getEach}}
+{{/beatles}}
+```
+
+Output:
+```
+* John : John Lennon
+* Paul : Paul McCartney
+* George : George Harrison
+* Ringo : Ringo Star
+```
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
 	"name": "ax5core",
-	"version": "0.8.0",
+	"version": "0.9.0",
 	"authors": [
 		"ThomasJ <[email protected]>"
 	],

diff --git a/dist/ax5core.js b/dist/ax5core.js
@@ -2424,7 +2424,16 @@ ax5.ui = (function (core) {
      */
     function Context(view, parentContext) {
         this.view = view;
-        this.cache = {'.': this.view};
+        this.cache = {
+            '.': this.view,
+            'getEach': function () {
+                var returns = [];
+                for (var k in this) {
+                    returns.push({'@key': k, '@value': this[k]});
+                }
+                return returns;
+            }
+        };
         this.parent = parentContext;
     }
 
@@ -2550,7 +2559,6 @@ ax5.ui = (function (core) {
      */
     Writer.prototype.renderTokens = function renderTokens(tokens, context, partials, originalTemplate) {
         var buffer = '';
-
         var token, symbol, value;
         for (var i = 0, numTokens = tokens.length; i < numTokens; ++i) {
             value = undefined;
@@ -2587,8 +2595,8 @@ ax5.ui = (function (core) {
 
         if (isArray(value)) {
             for (var j = 0, valueLength = value.length; j < valueLength; ++j) {
-                value[j].__i__ = j;
-                value[j].__first__ = (j === 0);
+                value[j]['@i'] = j;
+                value[j]['@first'] = (j === 0);
                 buffer += this.renderTokens(token[4], context.push(value[j]), partials, originalTemplate);
             }
         }

diff --git a/dist/ax5core.min.js b/dist/ax5core.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "ax5core",
-	"version": "0.8.0",
+	"version": "0.9.0",
 	"description": "`ax5core` is a collection of utility functions that have been designed for use in ax5ui",
 	"license": "MIT",
 	"repository": {

diff --git a/src/mustache.js b/src/mustache.js
@@ -352,7 +352,16 @@
      */
     function Context(view, parentContext) {
         this.view = view;
-        this.cache = {'.': this.view};
+        this.cache = {
+            '.': this.view,
+            'getEach': function () {
+                var returns = [];
+                for (var k in this) {
+                    returns.push({'@key': k, '@value': this[k]});
+                }
+                return returns;
+            }
+        };
         this.parent = parentContext;
     }
 
@@ -478,7 +487,6 @@
      */
     Writer.prototype.renderTokens = function renderTokens(tokens, context, partials, originalTemplate) {
         var buffer = '';
-
         var token, symbol, value;
         for (var i = 0, numTokens = tokens.length; i < numTokens; ++i) {
             value = undefined;
@@ -515,8 +523,8 @@
 
         if (isArray(value)) {
             for (var j = 0, valueLength = value.length; j < valueLength; ++j) {
-                value[j].__i__ = j;
-                value[j].__first__ = (j === 0);
+                value[j]['@i'] = j;
+                value[j]['@first'] = (j === 0);
                 buffer += this.renderTokens(token[4], context.push(value[j]), partials, originalTemplate);
             }
         }

diff --git a/test/index.html b/test/index.html
@@ -9,21 +9,69 @@
 <body style="padding: 50px;">
 
 <script>
-    console.log(ax5.util.cssNumber('100px'));
-    console.log(ax5.util.cssNumber(100));
-    console.log(ax5.util.cssNumber('100%'));
-    console.log(ax5.util.cssNumber('##100@'));
-
-    console.log(ax5.util.css({
-        background: "#ccc",
-        padding: "50px",
-        width: "100px"
-    }));
-    console.log(ax5.util.css('width:100px;padding: 50px; background: #ccc'));
-
-    console.log(ax5.util.isDateFormat('20160101'));
-    console.log(ax5.util.isDateFormat('2016*01*01'));
-    console.log(ax5.util.isDateFormat('20161132'));
+    /*
+     console.log(ax5.util.cssNumber('100px'));
+     console.log(ax5.util.cssNumber(100));
+     console.log(ax5.util.cssNumber('100%'));
+     console.log(ax5.util.cssNumber('##100@'));
+
+     console.log(ax5.util.css({
+     background: "#ccc",
+     padding: "50px",
+     width: "100px"
+     }));
+     console.log(ax5.util.css('width:100px;padding: 50px; background: #ccc'));
+
+     console.log(ax5.util.isDateFormat('20160101'));
+     console.log(ax5.util.isDateFormat('2016*01*01'));
+     console.log(ax5.util.isDateFormat('20161132'));
+     */
+
+    var getTmpl = function () {
+        return ''
+            + '<div class="ax5-ui-picker">'
+            + '{{#arrs}}'
+            + '<div class="ax-picker-heading">{{@i}}{{@first}}</div>'
+            + '{{/arrs}}'
+            + '<div class="ax-picker-body">'
+            + '<div class="ax-picker-contents">'
+            + '</div>'
+            + '{{#btns}}'
+            + '<div class="ax-picker-buttons">'
+            + '{{#btns}}{{#getEach}}'
+            + '<button class="btn btn-default">{{@key}}{{@value.label}}</button>'
+            + '{{/getEach}}{{/btns}}'
+            + '</div>'
+            + '{{/btns}}'
+            + '</div>'
+            + '<div class="ax-picker-arrow"></div>'
+            + '</div>'
+
+        + '{{#beatles}}'
+            + '{{#getEach}}'
+                + '* {{@key}} : {{@value.firstName}} {{@value.lastName}}'
+            + '{{/getEach}}'
+        + '{{/beatles}}'
+
+            ;
+    };
+
+    var view = {
+        "beatles": {
+            "John": {"firstName": "John", "lastName": "Lennon"},
+            "Paul": {"firstName": "Paul", "lastName": "McCartney"},
+            "George": {"firstName": "George", "lastName": "Harrison"},
+            "Ringo": {"firstName": "Ringo", "lastName": "Star"}
+        },
+        arrs: [
+            {a:1},
+            {a:2},
+            {a:3}
+        ]
+    };
+    var output = ax5.mustache.render(getTmpl(), view);
+    console.log(view);
+    console.log(output);
 </script>
 
 </body>