Refactor for DataBinding & Scroll

src/boot/Lungo.Boot.Article.js

@@ -39,7 +39,7 @@ LUNGO.Boot.Article = (function(lng, undefined) {
     var _createListElement = function(article) {
         if (article.children().length === 0) {
             var article_id = article.attr('id');
-            article.append('<ul id="' + article_id + '_list"></ul>');
+            article.append('<ul></ul>');
         }
     };
 

src/view/Lungo.View.Scroll.js

@@ -136,7 +136,7 @@ LUNGO.View.Scroll = (function(lng, undefined) {
         }
     };
 
-    var _getScrollContainer = function(id) {
+    var _getContainer = function(id) {
         var scroll = lng.dom('#' + id);
         var container = scroll.children().first();
 

src/view/Lungo.View.Template.Binding.js

@@ -19,20 +19,12 @@ LUNGO.View.Template.Binding = (function(lng, undefined) {
      *
      * @method create
      *
-     * @param {String} Id of the container showing the result of databinding
      * @param {String} Databinding Template Id
      * @param {Object} Data for binding
-     * @param {Function} Callback when the process is complete
      */
-    var create = function(container_id, template_id, data, callback) {
-        if (lng.View.Template.exists(template_id)) {
-            var template = lng.View.Template.get(template_id);
-            var markup = _processData(data, template);
-            _render(container_id, markup);
-            lng.Core.execute(callback);
-        } else {
-            lng.Core.log(3, 'lng.View.Template.binding: id ' + template_id + ' not exists');
-        }
+    var create = function(template_id, data) {
+        var template = lng.View.Template.get(template_id);
+        return _processData(data, template);
     };
 
     var dataAttribute = function(element, attribute) {
@@ -79,11 +71,6 @@ LUNGO.View.Template.Binding = (function(lng, undefined) {
         return template.replace(BINDING_PARSER, '');
     };
 
-    var _render = function(container_id, markup) {
-        var container = lng.dom('#' + container_id);
-        container.html(markup);
-    };
-
     return {
         create: create,
         dataAttribute: dataAttribute

src/view/Lungo.View.Template.List.js

@@ -10,8 +10,6 @@
 
 LUNGO.View.Template.List = (function(lng, undefined) {
 
-    var _config = null;
-
     /**
      * Create a list based DataBind with a configuration object for an element <article>
 	 * if the config has a 'norecords' property it will display the norecords markup rather than nothing.
@@ -21,64 +19,76 @@ LUNGO.View.Template.List = (function(lng, undefined) {
      * @param {object} Id of the container showing the result of databinding
      */
      var create = function(config) {
-        _config = config;
-        _config.container_id += '_list';
-
-        if (_validateConfig()) {
-            _order();
-            // @ToDo >> _group();
-            _render();
-            _createScroll();
+        config.container = _getContainer(config.el);
+
+        if (_validateConfig(config)) {
+            config.data = _order(config);
+            _render(config);
+            _scroll(config.el);
         }
 	};
 
-    var _validateConfig = function() {
+    var append = function(config) {
+        var markup = lng.View.Template.markup(config.template, config.data);
+        var container = _getContainer(config.el);
+
+        container.append(markup);
+        _scroll(config.el, 'last');
+    };
+
+    var prepend = function(config) {
+        var markup = lng.View.Template.markup(config.template, config.data);
+        var container = _getContainer(config.el);
+
+        container.prepend(markup);
+        _scroll(config.el, 'first');
+    };
+
+    var _validateConfig = function(config) {
         var checked = false;
-        var container_exists = !! lng.dom(_config.container_id);
-        var template_exists = lng.View.Template.exists(_config.template_id);
+        var container_exists = !! config.container.length > 0;
+        var template_exists = lng.View.Template.exists(config.template);
 
         if (container_exists && template_exists) {
-            //@ToDo >> Refactor to other method
-            lng.dom("#"+_config.container_id).html('');
-
-            var type = lng.Core.toType(_config.data);
+            var type = lng.Core.toType(config.data);
             if (type === 'array' || type === 'object') {
                 checked = true;
             }
+        } else {
+            lng.Core.log(3, 'LungoJS [ERROR]: Incorrect parameters for lng.View.Template.List.create() method.');
         }
 
         return checked;
     };
 
-    var _order = function() {
-        var order_field = _config.order_field;
-        var order_type  = (_config.order_type === 'desc') ? -1 : 1;
+    var _getContainer = function(element) {
+        return lng.dom(element).children().first();
+    }
 
-        if (order_field && order_type) {
-            _config.data.sort(function(a, b) {
-                return (a[order_field] < b[order_field]) ? - order_type :
-                       (a[order_field] > b[order_field]) ? order_type : 0;
-            });
+    var _order = function(config) {
+        if (config.order && config.order.field && config.order.type) {
+            config.data = lng.Core.orderByProperty(config.data, config.order.field, config.order.type);
         }
+        return config.data;
     };
 
-    // @ToDo >> group list by property
-    var _group = function() {
+    var _render = function(config) {
+        lng.View.Template.render(config.container.selector, config.template, config.data);
     };
 
-    var _render = function() {
-        lng.View.Template.render(_config.container_id, _config.template_id, _config.data);
-    };
-
-    var _createScroll = function() {
-        var container_id_for_scroll = lng.dom('#' + _config.container_id).parent().attr('id');
-        var list_config = { snap: 'li' };
+    var _scroll = function(element, direction) {
+        var element_id = lng.dom(element).attr('id');
 
-        lng.View.Scroll.init(container_id_for_scroll, list_config);
+        lng.View.Scroll.init(element_id);
+        if (direction) {
+            lng.View.Scroll[(direction === 'first') ? 'first' : 'last'](element_id);
+        }
     };
 
     return {
-        create: create
+        create: create,
+        append: append,
+        prepend: prepend
     };
 
-})(LUNGO);
+})(LUNGO);

src/view/Lungo.View.Template.js

@@ -58,15 +58,36 @@ LUNGO.View.Template = (function(lng, undefined) {
      * @param {Object} Data for binding
      * @param {Function} Callback when the process is complete
      */
-    var render = function(container_id, template_id, data, callback) {
-        lng.View.Template.Binding.create(container_id, template_id, data, callback);
+    var render = function(element, template_id, data, callback) {
+        if (lng.View.Template.exists(template_id)) {
+            var container = lng.dom(element);
+            var markup = this.markup(template_id, data);
+            container.html(markup);
+
+            lng.Core.execute(callback);
+        } else {
+            lng.Core.log(3, 'lng.View.Template.binding: id ' + template_id + ' not exists');
+        }
+    };
+
+    /**
+     * Performs databinding process for a data set and a given template
+     *
+     * @method markup
+     *
+     * @param {String} Databinding Template Id
+     * @param {Object} Data for binding
+     */
+    var markup = function(template_id, data) {
+        return lng.View.Template.Binding.create(template_id, data);
     };
 
     return {
         create: create,
         exists: exists,
         get: get,
-        render: render
+        render: render,
+        markup: markup
     };
 
-})(LUNGO);
+})(LUNGO);