First implementation of two-binding

Author: pc-david\david.desmaisons

examples/index.html

@@ -16,10 +16,19 @@
      <div id="main">
         <h1>Vue Dragable For</h1>
 
+        <h2>Dragable</h2>
         <div>
             <div v-dragable-for="element in list">{{element.name}}</div>
          </div>
 
+        <h2>Normal</h2>
+        <div>
+            <div v-for="element in list">{{element.name}}</div>
+         </div>
+
+        <button @click="add">Add</button>
+        <button @click="replace">Replace</button>
+
         <script type="text/javascript" src="..\libs\vue\dist\vue.js"></script>
         <script type="text/javascript" src="..\libs\lodash\lodash.js"></script>
         <script type="text/javascript" src="..\libs\Sortable\Sortable.js"></script>

examples/script/main.js

@@ -4,5 +4,13 @@ var vm = new Vue({
 		list:[{name:"John"}, 
 				{name:"Joao"}, 
 				{name:"Jean"} ]
+		},
+	methods:{
+			add: function(){
+				this.list.push({name:'Juan'});
+			},
+			replace: function(){
+				this.list=[{name:'Edgard'}]
+			}
 		}
 	});

examples/src/vuedragablefor.js

@@ -1,50 +1,43 @@
 (function(){
 
-  function copyMethod(target, source, preserve){
-      for (var property in source) {
-            if (!source.hasOwnProperty(property) || preserve.indexOf(property)!==-1)
-                continue;
-
-            var value = source[property];
-            if (typeof value !== "function")
-                continue;
-
-            target[property] = function(){
-              return value.apply(this, arguments);
-            }
-        }
-  }
-
   var forDirective = Vue.directive('for');
-  var clonedForDirective = _.clone(forDirective);
+  var dragableForDirective = _.clone(forDirective);
+  dragableForDirective.params = dragableForDirective.params.concat('root', 'options');
 
   function mix(source, functions){
     _.forEach(['bind', 'update', 'unbind'],function(value){
-        var original = clonedForDirective[value];
-        clonedForDirective[value] = function(){
+        var original = source[value];
+        source[value] = function(){
           functions[value].apply(this, arguments);
           return original.apply(this, arguments);
         };
     });
   }
 
-   mix(clonedForDirective, {
-      bind : function () {
+   mix(dragableForDirective, {
+      bind : function () {    
+        var ctx = this;    
         var option ={
             onEnd: function (evt) {
-              evt.oldIndex;  // element's old index within parent
-              evt.newIndex;  // element's new index within parent
               console.log(evt.oldIndex, evt.newIndex);
+              var collection = ctx.collection;
+              if (!!collection)
+                collection.splice(evt.newIndex, 0, collection.splice(evt.oldIndex, 1)[0] );
           }
         };
         this.sortable = new Sortable(this.el.parentElement, option);
       },
-      update : function(){
-        console.log(this.sortable)
+      update : function (value){
+
+        if ((value!==null) && (!Array.isArray(value)))
+          throw new Error('should received an Array');
+
+        console.log('update', value);
+        this.collection = value;
       },
-      unbind : () => console.log('unbind'),
+      unbind : function (){}
    });
 
-  Vue.directive('dragable-for', clonedForDirective);
+  Vue.directive('dragable-for', dragableForDirective);
 
 })();

src/vuedragablefor.js

@@ -1,48 +1,43 @@
 (function(){
 
-  function copyMethod(target, source, preserve){
-      for (var property in source) {
-            if (!source.hasOwnProperty(property) || preserve.indexOf(property)!==-1)
-                continue;
-
-            var value = source[property];
-            if (typeof value !== "function")
-                continue;
-
-            target[property] = function(){
-              return value.apply(this, arguments);
-            }
-        }
-  }
-
   var forDirective = Vue.directive('for');
-  var clonedForDirective = _.clone(forDirective);
+  var dragableForDirective = _.clone(forDirective);
+  dragableForDirective.params = dragableForDirective.params.concat('root', 'options');
 
   function mix(source, functions){
     _.forEach(['bind', 'update', 'unbind'],function(value){
-        var original = clonedForDirective[value];
-        clonedForDirective[value] = function(){
+        var original = source[value];
+        source[value] = function(){
           functions[value].apply(this, arguments);
           return original.apply(this, arguments);
         };
     });
   }
 
-   mix(clonedForDirective, {
-      bind : function () {
+   mix(dragableForDirective, {
+      bind : function () {    
+        var ctx = this;    
         var option ={
             onEnd: function (evt) {
-              evt.oldIndex;  // element's old index within parent
-              evt.newIndex;  // element's new index within parent
               console.log(evt.oldIndex, evt.newIndex);
+              var collection = ctx.collection;
+              if (!!collection)
+                collection.splice(evt.newIndex, 0, collection.splice(evt.oldIndex, 1)[0] );
           }
         };
-        this.sortable = new Sortable(this.el, option);
+        this.sortable = new Sortable(this.el.parentElement, option);
+      },
+      update : function (value){
+
+        if ((value!==null) && (!Array.isArray(value)))
+          throw new Error('should received an Array');
+
+        console.log('update', value);
+        this.collection = value;
       },
-      update : function (){},
       unbind : function (){}
    });
 
-  Vue.directive('dragable-for', clonedForDirective);
+  Vue.directive('dragable-for', dragableForDirective);
 
 })();