Permalink
Browse files

Templating Proof of Concept. JS only

  • Loading branch information...
1 parent 246aee5 commit 0a1ef2ae00f03f076b0eaf18ffe3154e01fd8588 @jaridmargolin jaridmargolin committed Jun 21, 2012
Showing with 252 additions and 8 deletions.
  1. +232 −6 common/js/global.js
  2. +4 −2 views/frame/frame.html
  3. +6 −0 views/page/page.html
  4. +10 −0 views/post/post.html
View
@@ -36,8 +36,8 @@ BGT.util = (function ($, me) {
$.ajax({
url: params.templateUrl,
dataType: 'html',
- success: function(template) {
- callback(template);
+ success: function(templateHtml) {
+ callback(templateHtml);
},
error: function(xhr, ajaxOptions, thrownError) {
callback({
@@ -49,14 +49,240 @@ BGT.util = (function ($, me) {
});
}
+ /*
+ * @function
+ * @name getTemplate
+ * @description Use mustache to grab and render HTML
+ * @param {String} templateUrl
+ * @param {String} data
+ *
+ */
+ me.getAll = function (params, callback) {
+ var template = '',
+ partials = {},
+ partialsLength = params.partials.length,
+ counter = 0,
+ loadTemplate = function () {
+ BGT.util.getTemplate({
+ "templateUrl": params.templateUrl
+ }, function (templateHtml) {
+ template = templateHtml;
+ loadPartials();
+ });
+ },
+ loadPartials = function () {
+ BGT.util.getTemplate({
+ "templateUrl": params.partials[counter].url
+ }, function (templateHtml) {
+ partials[params.partials[counter].name] = templateHtml;
+ counter ++;
+ if (counter < partialsLength) {
+ loadPartials();
+ } else {
+ callback({
+ "template": template,
+ "partials": partials
+ });
+ }
+ });
+ };
+ loadTemplate();
+ }
+
return me
})(jQuery, BGT.util || {});
+var data = template = "frame",
+data = {
+ categories: [
+ {
+ posts: [
+ {
+ postTitle: "Title 1",
+ postAttributes: [
+ "attr1",
+ "attr2",
+ "attr3"
+ ]
+ },
+ {
+ postTitle: "Title 2",
+ postAttributes: [
+ "attr4",
+ "attr5",
+ "attr6"
+ ]
+ },
+ {
+ postTitle: "Title 3",
+ postAttributes: [
+ "attr7",
+ "attr8",
+ "attr9"
+ ]
+ }
+ ]
+ },
+ {
+ posts: [
+ {
+ postTitle: "Title 4",
+ postAttributes: [
+ "attr1",
+ "attr2",
+ "attr3"
+ ]
+ },
+ {
+ postTitle: "Title 5",
+ postAttributes: [
+ "attr4",
+ "attr5",
+ "attr6"
+ ]
+ },
+ {
+ postTitle: "Title 6",
+ postAttributes: [
+ "attr7",
+ "attr8",
+ "attr9"
+ ]
+ }
+ ]
+ },
+ {
+ posts: [
+ {
+ postTitle: "Title 7",
+ postAttributes: [
+ "attr1",
+ "attr2",
+ "attr3"
+ ]
+ },
+ {
+ postTitle: "Title 8",
+ postAttributes: [
+ "attr4",
+ "attr5",
+ "attr6"
+ ]
+ },
+ {
+ postTitle: "Title 9",
+ postAttributes: [
+ "attr7",
+ "attr8",
+ "attr9"
+ ]
+ }
+ ]
+ }
+ ],
+ news: [
+ {
+ posts: [
+ {
+ postTitle: "Title 1",
+ postAttributes: [
+ "attr1",
+ "attr2",
+ "attr3"
+ ]
+ },
+ {
+ postTitle: "Title 2",
+ postAttributes: [
+ "attr4",
+ "attr5",
+ "attr6"
+ ]
+ },
+ {
+ postTitle: "Title 3",
+ postAttributes: [
+ "attr7",
+ "attr8",
+ "attr9"
+ ]
+ }
+ ]
+ },
+ {
+ posts: [
+ {
+ postTitle: "Title 4",
+ postAttributes: [
+ "attr1",
+ "attr2",
+ "attr3"
+ ]
+ },
+ {
+ postTitle: "Title 5",
+ postAttributes: [
+ "attr4",
+ "attr5",
+ "attr6"
+ ]
+ },
+ {
+ postTitle: "Title 6",
+ postAttributes: [
+ "attr7",
+ "attr8",
+ "attr9"
+ ]
+ }
+ ]
+ },
+ {
+ posts: [
+ {
+ postTitle: "Title 7",
+ postAttributes: [
+ "attr1",
+ "attr2",
+ "attr3"
+ ]
+ },
+ {
+ postTitle: "Title 8",
+ postAttributes: [
+ "attr4",
+ "attr5",
+ "attr6"
+ ]
+ },
+ {
+ postTitle: "Title 9",
+ postAttributes: [
+ "attr7",
+ "attr8",
+ "attr9"
+ ]
+ }
+ ]
+ }
+ ]
+};
+
$('#init').bind('click', function () {
- BGT.util.getTemplate({
- "templateUrl": '/wordpress-mustache-test/views/frame/frame.html'
- }, function (template) {
- console.log(Mustache.render(template));
+ BGT.util.getAll({
+ "templateUrl": '/wordpress-mustache-test/views/page/page.html',
+ "partials": [
+ {
+ "name": 'frame',
+ "url": '/wordpress-mustache-test/views/frame/frame.html'
+ },
+ {
+ "name": 'post',
+ "url": '/wordpress-mustache-test/views/post/post.html'
+ }
+ ]
+ }, function (params) {
+ $('body').append(Mustache.render(params.template, data, params.partials));
});
})
View
@@ -1,5 +1,7 @@
-<div class="frame">
+<div class="frame" style="float: left">
<ul>
- {{>posts}}
+ {{#posts}}
+ {{>post}}
+ {{/posts}}
</ul>
</div>
View
@@ -0,0 +1,6 @@
+{{#categories}}
+ {{>frame}}
+{{/categories}}
+{{#news}}
+ {{>frame}}
+{{/news}}
View
@@ -0,0 +1,10 @@
+<li>
+ <div class="post">
+ <h2>{{postTitle}}</h2>
+ <ul>
+ {{#postAttributes}}
+ <li>{{.}}</li>
+ {{/postAttributes}}
+ </ul>
+ </div>
+</li>

0 comments on commit 0a1ef2a

Please sign in to comment.