New system for load templates via resources

examples/kitchen-sink/app/app.js

@@ -4,17 +4,18 @@ var App = (function(lng, undefined) {
     lng.App.init({
         name: 'Kitchen Sink',
         version: '1.1',
-        sections: [
-            'navigation.html',
-            'buttons.html',
-            'lists.html',
-            'settings.html',
-            'forms.html',
-            'buttons-extra.html',
-            'aside.html',
-            'http://examples.tapquo.com/examples/kitchen-sink/app/sections/remote.html',
-            'http://examples.tapquo.com/examples/kitchen-sink/app/sections/error.html',
-        ]
+        resources: {
+            sections: [
+                'navigation.html',
+                'buttons.html',
+                'lists.html',
+                'settings.html',
+                'forms.html',
+                'buttons-extra.html',
+                'aside.html',
+                'http://examples.tapquo.com/examples/kitchen-sink/app/sections/remote.html',
+                'http://examples.tapquo.com/examples/kitchen-sink/app/sections/error.html']
+        }
     });
 
     var _getEnvironmentFromQuoJS = (function() {

examples/kitchen-sink/app/templates/list-home.html

@@ -0,0 +1 @@
+<li id={{id}} data-icon="home">{{name}}</li>

examples/kitchen-sink/index.html

@@ -342,7 +342,7 @@
     <script src="../../src/attributes/Lungo.Attributes.Data.js"></script>
     <script src="../../src/Lungo.Fallback.js"></script>
     <script src="../../src/boot/Lungo.Boot.js"></script>
-    <script src="../../src/boot/Lungo.Boot.Async.js" ></script>
+    <script src="../../src/boot/Lungo.Boot.Resources.js" ></script>
     <script src="../../src/boot/Lungo.Boot.Stats.js" ></script>
     <script src="../../src/boot/Lungo.Boot.Layout.js"></script>
     <script src="../../src/boot/Lungo.Boot.Events.js"></script>

examples/test-pro/app/app.js

@@ -3,10 +3,13 @@ var App = (function(lng, undefined) {
     lng.App.init({
         name: 'Kitchen Sink',
         version: '1.1',
-        sections: [/*
-            'local.html',
-            'http://examples.tapquo.com/remote.html'*/
-        ]
+        resources: {
+            sections: [
+                'local.html',
+                'http://examples.tapquo.com/remote.html'],
+            templates: [
+                'list-home.html']
+        }
     });
 
     return {

examples/test-pro/app/events.js

@@ -3,6 +3,18 @@ App.Events = (function(lng, undefined) {
     lng.ready(function(){
         console.error('LUNGO.js is ready...');
         App.Services.mockProfiles();
+
+
+        var homes = [
+            {id: 1, name: 'lemoa'},
+            {id: 2, name: 'zalla'}
+        ];
+
+        lng.View.Template.List.create({
+            el: '#art-3',
+            template: 'home-tmp',
+            data: homes
+        })
     });
 
     //Toggle Aside

examples/test-pro/app/templates/list-home.html

@@ -0,0 +1,6 @@
+<li data-template="home-tmp" id={{id}}>
+	<span class="icon mini home"></span>
+	<div class="onright bubble red" data-icon="calendar">{{time}} ago</div>
+	{{name}}
+	<small data-search="earth">{{description}}</small>
+</li>

examples/test-pro/app/view.js

@@ -2,7 +2,7 @@ App.View = (function(lng, App, undefined) {
 
     lng.View.Template.create(
         'profile-tmp',
-        '<li class="selectable">\
+        '<li class="selectable" data-icon="home">\
                 <div class="onright">{{name}}</div>\
                 {{name}}\
                 <small>{{description}}</small>\

examples/test-pro/index.html

@@ -69,6 +69,7 @@
             <nav>
                 <a href="#art-1"  class="current" data-target="article" data-title="Art-1" data-icon="left"></a>
                 <a href="#art-2" data-target="article" data-title="Art-2" data-icon="right"></a>
+                <a href="#art-3" data-target="article" data-title="Art-3" data-icon="right"></a>
                 <a href="#sec-2" data-target="section" data-icon="files"></a>
                 <a href="#test" data-target="section" data-icon="settings"></a>
             </nav>
@@ -99,6 +100,8 @@
             <input type="text" placeholder="Some text..." />
             </p>
         </article>
+
+        <article id="art-3" class="list indented scrollable"></article>
     </section>
 
     <section id="sec-2">
@@ -208,7 +211,7 @@
     <script src="../../src/attributes/Lungo.Attributes.Data.js"></script>
     <script src="../../src/Lungo.Fallback.js"></script>
     <script src="../../src/boot/Lungo.Boot.js"></script>
-    <script src="../../src/boot/Lungo.Boot.Async.js" ></script>
+    <script src="../../src/boot/Lungo.Boot.Resources.js" ></script>
     <script src="../../src/boot/Lungo.Boot.Stats.js" ></script>
     <script src="../../src/boot/Lungo.Boot.Layout.js"></script>
     <script src="../../src/boot/Lungo.Boot.Events.js"></script>

src/boot/Lungo.Boot.Async.js

@@ -1,55 +0,0 @@
-/**
- * Load Async sections
- *
- * @namespace LUNGO
- * @class App
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-
-LUNGO.Boot.Async = (function(lng, $$, undefined) {
-
-    /**
-     * Start loading async sections (local & remote)
-     *
-     * @method start
-     *
-     */
-    var start = function() {
-        var async_sections = lng.App.get('sections');
-
-        if (async_sections) {
-            for (section in async_sections) {
-                var url = _parseUrl(async_sections[section])
-                var response = _loadAsyncSection(url);
-                _pushSectionInLayout(response);
-            }
-        }
-    };
-
-    var _parseUrl = function(section_url) {
-        return (/http/.test(section_url)) ? section_url : 'app/sections/' + section_url;
-    };
-
-    var _loadAsyncSection = function(url) {
-        return $$.ajax({
-            url: url,
-            async: false,
-            dataType: 'html',
-            error: function() {
-                console.error('[ERROR] Loading url', arguments);
-            }
-        });
-    };
-
-    var _pushSectionInLayout = function(section) {
-        if (lng.Core.toType(section) === 'string') {
-            lng.dom('body').append(section);
-        }
-    };
-
-    return {
-        start: start
-    };
-
-})(LUNGO, Quo);

src/boot/Lungo.Boot.Resources.js

@@ -0,0 +1,79 @@
+/**
+ * Load Resources
+ *
+ * @namespace LUNGO.Boot
+ * @class Resources
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+LUNGO.Boot.Resources = (function(lng, $$, undefined) {
+
+    var RESOURCE_KEYS = {
+        SECTIONS: 'sections',
+        TEMPLATES: 'templates'
+    }
+
+    /**
+     * Start loading async sections (local & remote)
+     *
+     * @method start
+     *
+     */
+    var start = function() {
+        var resources = lng.App.get('resources');
+        for (resource_key in resources) {
+            _loadResources(resource_key, resources[resource_key]);
+        }
+    };
+
+    var _loadResources = function(resource_key, resources, callback) {
+        for (index in resources) {
+            var url = _parseUrl(resources[index], resource_key);
+            var response = _loadAsyncSection(url);
+
+            if (resource_key === RESOURCE_KEYS.SECTIONS) {
+                _pushSectionInLayout(response);
+            } else {
+                _createTemplate(response);
+            }
+        }
+    };
+
+    var _parseUrl = function(section_url, folder) {
+        return (/http/.test(section_url)) ? section_url : 'app/' + folder + '/' + section_url;
+    };
+
+    var _loadAsyncSection = function(url) {
+        return $$.ajax({
+            url: url,
+            async: false,
+            dataType: 'html',
+            error: function() {
+                console.error('[ERROR] Loading url', arguments);
+            }
+        });
+    };
+
+    var _pushSectionInLayout = function(section) {
+        if (lng.Core.toType(section) === 'string') {
+            lng.dom('body').append(section);
+        }
+    };
+
+    var _createTemplate = function(markup) {
+        var div = document.createElement('DIV');
+        div.innerHTML = markup;
+
+        var template_id = lng.dom(div.firstChild).data('template');
+
+        if (template_id) {
+            lng.View.Template.create(template_id, markup);
+        }
+    };
+
+    return {
+        start: start
+    };
+
+})(LUNGO, Quo);

src/boot/Lungo.Boot.js

@@ -11,7 +11,7 @@
 LUNGO.Boot = (function(lng, undefined) {
 
     return function() {
-        lng.Boot.Async.start();
+        lng.Boot.Resources.start();
         lng.Boot.Layout.start();
         lng.Boot.Events.start();
         lng.Boot.Data.start();

vendor/build.sh

@@ -71,7 +71,7 @@ echo -e "\033[0m"============================ LUNGO COMPILER ===================
     #Dom
     DIR=$LUNGO_SOURCES"boot/"$LUNGO_NAMESPACE"Boot."
     echo -e "\033[33m  [DIR]: "$LUNGO_SOURCES"boot/"
-    FILES=(js Async.js Stats.js Layout.js Article.js Data.js Events.js Section.js)
+    FILES=(js Resources.js Stats.js Layout.js Article.js Data.js Events.js Section.js)
     for file in "${FILES[@]}"
     do
         FILES_TO_COMPILE=$FILES_TO_COMPILE" --js "$DIR$file