merge r-model

regularjs · Sep 4, 2014 · e7ad9c6 · e7ad9c6
1 parent 8e28803
commit e7ad9c6
Show file tree

Hide file tree

Showing 9 changed files with 124 additions and 84 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-![logo](http://regularjs.github.io//asserts/image/regular-icon-100.png) 
+
 
 # regular = react(ractive) + angular.
 
@@ -24,10 +24,10 @@ __template__
 
 ```html
 {{#list notes as c}}
-  <p>{{c.content}}<a href='#' on-click={{this.remove(c)}}>remove</a></p>
+  &amp;amp;lt;p>{{c.content}}&amp;amp;lt;a href='#' on-click={{this.remove(c)}}>remove&amp;amp;lt;/a>&amp;amp;lt;/p>
 {{/list}}
-<textarea r-model={{draftComment}}></textarea>
-<button on-click={{this.add()}}>new Note</button>
+&amp;amp;lt;textarea r-model={{draftComment}}>&amp;amp;lt;/textarea>
+&amp;amp;lt;button on-click={{this.add()}}>new Note&amp;amp;lt;/button>
 ```
 
 __javascript__
@@ -59,7 +59,7 @@ then you can find `regular.js` and `regular.min.js` in `dist` folder;
 or....
 
 ```html
-<script src="https://rawgit.com/regularjs/regular/master/dist/regular.min.js"></script>
+&amp;amp;lt;script src="https://rawgit.com/regularjs/regular/master/dist/regular.min.js">&amp;amp;lt;/script>
 ```
 
 
@@ -119,7 +119,7 @@ IE7+ and other modern browser. __In fact, most of our products need to support I
   1. `@(Expression)` to create binding-once Expression 
   2. lightweight animation support
   3. svg support
-  4. `{{#if }}` can be used in tag. like `<div {{#if !user }} on-click = {{this.login()}}{{/if}}></div>`
+  4. `{{#if }}` can be used in tag. like `&amp;amp;lt;div {{#if !user }} on-click = {{this.login()}}{{/if}}>&amp;amp;lt;/div>`
 
 
 ## TODO

diff --git a/dist/regular.js b/dist/regular.js
@@ -1470,6 +1470,19 @@ walkers.element = function(ast){
 
   var child;
 
+  if(group && !_.isVoidTag(ast.tag)){
+    dom.inject( combine.node(group) , element)
+  }
+
+  // sort before
+  attrs.sort(function(a1, a2){
+    var d1 = Constructor.directive(a1.name),
+      d2 = Constructor.directive(a2.name);
+    if(d1 && d2) return (d2.priority || 1) - (d1.priority || 1);
+    if(d1) return 1;
+    if(d2) return -1;
+    return -1;
+  })
   // may distinct with if else
   var destroies = walkAttributes.call(this, attrs, element, destroies);
 
@@ -1480,10 +1493,6 @@ walkers.element = function(ast){
     type: "element",
     group: group,
     node: function(){
-      if(!res.init && group && !_.isVoidTag(ast.tag)){
-        animate.inject( combine.node(group) , element)
-        res.init = true;
-      }
       return element;
     },
     last: function(){
@@ -3318,6 +3327,7 @@ var methods = {
       get = expr.get;
       once = expr.once || expr.constant;
     }
+
     this._watchers.push({
       id: uid, 
       get: get, 
@@ -3996,12 +4006,10 @@ function initSelect( elem, parsed){
     self.$update();
     inProgress = false;
   }
-  dom.on(elem, "change", handler);
-  this.$on('init', function(){
-    if(parsed.get(self) === undefined){
-       parsed.set(self, elem.value);
-    }
-  });
+
+  if(parsed.get(self) === undefined && elem.value){
+     parsed.set(self, elem.value);
+  }
   return function destroy(){
     dom.off(elem, "change", handler);
   }
@@ -4044,11 +4052,9 @@ function initText(elem, parsed){
     dom.on(elem, "cut", handler)
     dom.on(elem, "change", handler)
   }
-  this.$on('init', function(){
-    if(parsed.get(self) === undefined){
-       parsed.set(self, elem.value);
-    }
-  })
+  if(parsed.get(self) === undefined && elem.value){
+     parsed.set(self, elem.value);
+  }
   return function destroy(){
     if(dom.msie !== 9 && "oninput" in dom.tNode ){
       elem.removeEventListener("input", handler );
@@ -4080,12 +4086,10 @@ function initCheckBox(elem, parsed){
     inProgress = false;
   }
   if(parsed.set) dom.on(elem, "change", handler)
-  this.$on('init', function(){
 
-    if(parsed.get(self) === undefined){
-      parsed.set(self, elem.checked);
-    }
-  });
+  if(parsed.get(self) === undefined){
+    parsed.set(self, !!elem.checked);
+  }
 
   return function destroy(){
     if(parsed.set) dom.off(elem, "change", handler)
@@ -4113,11 +4117,9 @@ function initRadio(elem, parsed){
   }
   if(parsed.set) dom.on(elem, "change", handler)
   // beacuse only after compile(init), the dom structrue is exsit. 
-  this.$on('init', function(){
-    if(parsed.get(self) === undefined){
-      if(elem.checked) parsed.set(self, elem.value);
-    }
-  });
+  if(parsed.get(self) === undefined){
+    if(elem.checked) parsed.set(self, elem.value);
+  }
 
   return function destroy(){
     if(parsed.set) dom.off(elem, "change", handler)

diff --git a/dist/regular.min.js b/dist/regular.min.js
diff --git a/src/directive/form.js b/src/directive/form.js
@@ -53,12 +53,10 @@ function initSelect( elem, parsed){
     self.$update();
     inProgress = false;
   }
-  dom.on(elem, "change", handler);
-  this.$on('init', function(){
-    if(parsed.get(self) === undefined){
-       parsed.set(self, elem.value);
-    }
-  });
+
+  if(parsed.get(self) === undefined && elem.value){
+     parsed.set(self, elem.value);
+  }
   return function destroy(){
     dom.off(elem, "change", handler);
   }
@@ -101,11 +99,9 @@ function initText(elem, parsed){
     dom.on(elem, "cut", handler)
     dom.on(elem, "change", handler)
   }
-  this.$on('init', function(){
-    if(parsed.get(self) === undefined){
-       parsed.set(self, elem.value);
-    }
-  })
+  if(parsed.get(self) === undefined && elem.value){
+     parsed.set(self, elem.value);
+  }
   return function destroy(){
     if(dom.msie !== 9 && "oninput" in dom.tNode ){
       elem.removeEventListener("input", handler );
@@ -137,12 +133,10 @@ function initCheckBox(elem, parsed){
     inProgress = false;
   }
   if(parsed.set) dom.on(elem, "change", handler)
-  this.$on('init', function(){
 
-    if(parsed.get(self) === undefined){
-      parsed.set(self, elem.checked);
-    }
-  });
+  if(parsed.get(self) === undefined){
+    parsed.set(self, !!elem.checked);
+  }
 
   return function destroy(){
     if(parsed.set) dom.off(elem, "change", handler)
@@ -170,11 +164,9 @@ function initRadio(elem, parsed){
   }
   if(parsed.set) dom.on(elem, "change", handler)
   // beacuse only after compile(init), the dom structrue is exsit. 
-  this.$on('init', function(){
-    if(parsed.get(self) === undefined){
-      if(elem.checked) parsed.set(self, elem.value);
-    }
-  });
+  if(parsed.get(self) === undefined){
+    if(elem.checked) parsed.set(self, elem.value);
+  }
 
   return function destroy(){
     if(parsed.set) dom.off(elem, "change", handler)

diff --git a/src/helper/watcher.js b/src/helper/watcher.js
@@ -35,6 +35,7 @@ var methods = {
       get = expr.get;
       once = expr.once || expr.constant;
     }
+
     this._watchers.push({
       id: uid, 
       get: get, 

diff --git a/src/walkers.js b/src/walkers.js
@@ -242,6 +242,19 @@ walkers.element = function(ast){
 
   var child;
 
+  if(group && !_.isVoidTag(ast.tag)){
+    dom.inject( combine.node(group) , element)
+  }
+
+  // sort before
+  attrs.sort(function(a1, a2){
+    var d1 = Constructor.directive(a1.name),
+      d2 = Constructor.directive(a2.name);
+    if(d1 && d2) return (d2.priority || 1) - (d1.priority || 1);
+    if(d1) return 1;
+    if(d2) return -1;
+    return -1;
+  })
   // may distinct with if else
   var destroies = walkAttributes.call(this, attrs, element, destroies);
 
@@ -252,10 +265,6 @@ walkers.element = function(ast){
     type: "element",
     group: group,
     node: function(){
-      if(!res.init && group && !_.isVoidTag(ast.tag)){
-        animate.inject( combine.node(group) , element)
-        res.init = true;
-      }
       return element;
     },
     last: function(){

diff --git a/test/regular.js b/test/regular.js
@@ -1468,6 +1468,19 @@ walkers.element = function(ast){
 
   var child;
 
+  if(group && !_.isVoidTag(ast.tag)){
+    dom.inject( combine.node(group) , element)
+  }
+
+  // sort before
+  attrs.sort(function(a1, a2){
+    var d1 = Constructor.directive(a1.name),
+      d2 = Constructor.directive(a2.name);
+    if(d1 && d2) return (d2.priority || 1) - (d1.priority || 1);
+    if(d1) return 1;
+    if(d2) return -1;
+    return -1;
+  })
   // may distinct with if else
   var destroies = walkAttributes.call(this, attrs, element, destroies);
 
@@ -1478,10 +1491,6 @@ walkers.element = function(ast){
     type: "element",
     group: group,
     node: function(){
-      if(!res.init && group && !_.isVoidTag(ast.tag)){
-        animate.inject( combine.node(group) , element)
-        res.init = true;
-      }
       return element;
     },
     last: function(){
@@ -3316,6 +3325,7 @@ var methods = {
       get = expr.get;
       once = expr.once || expr.constant;
     }
+
     this._watchers.push({
       id: uid, 
       get: get, 
@@ -3994,12 +4004,10 @@ function initSelect( elem, parsed){
     self.$update();
     inProgress = false;
   }
-  dom.on(elem, "change", handler);
-  this.$on('init', function(){
-    if(parsed.get(self) === undefined){
-       parsed.set(self, elem.value);
-    }
-  });
+
+  if(parsed.get(self) === undefined && elem.value){
+     parsed.set(self, elem.value);
+  }
   return function destroy(){
     dom.off(elem, "change", handler);
   }
@@ -4042,11 +4050,9 @@ function initText(elem, parsed){
     dom.on(elem, "cut", handler)
     dom.on(elem, "change", handler)
   }
-  this.$on('init', function(){
-    if(parsed.get(self) === undefined){
-       parsed.set(self, elem.value);
-    }
-  })
+  if(parsed.get(self) === undefined && elem.value){
+     parsed.set(self, elem.value);
+  }
   return function destroy(){
     if(dom.msie !== 9 && "oninput" in dom.tNode ){
       elem.removeEventListener("input", handler );
@@ -4078,12 +4084,10 @@ function initCheckBox(elem, parsed){
     inProgress = false;
   }
   if(parsed.set) dom.on(elem, "change", handler)
-  this.$on('init', function(){
 
-    if(parsed.get(self) === undefined){
-      parsed.set(self, elem.checked);
-    }
-  });
+  if(parsed.get(self) === undefined){
+    parsed.set(self, !!elem.checked);
+  }
 
   return function destroy(){
     if(parsed.set) dom.off(elem, "change", handler)
@@ -4111,11 +4115,9 @@ function initRadio(elem, parsed){
   }
   if(parsed.set) dom.on(elem, "change", handler)
   // beacuse only after compile(init), the dom structrue is exsit. 
-  this.$on('init', function(){
-    if(parsed.get(self) === undefined){
-      if(elem.checked) parsed.set(self, elem.value);
-    }
-  });
+  if(parsed.get(self) === undefined){
+    if(elem.checked) parsed.set(self, elem.value);
+  }
 
   return function destroy(){
     if(parsed.set) dom.off(elem, "change", handler)

diff --git a/test/spec/browser-directive.js b/test/spec/browser-directive.js
@@ -193,7 +193,7 @@ describe('r-model directive', function(){
   describe('checkbox binding', function(){
     it('input:checkbox"s initial state should be correct', function(){
       var template = 
-        "<input type='checkbox' r-model={{nontype}} checked >"+
+        "<input checked  type='checkbox' r-model={{nontype}} >"+
         "<input type='checkbox' r-model={{nontype3}}>"+
         "<input type='checkbox' r-model={{nontype2}} checked=checked>";
       var component = new Regular({
@@ -363,6 +363,38 @@ describe('r-model directive', function(){
       destroy(component, container);
 
     })
+
+    it("r-model in if should works as expect", function(){
+      var container = document.createElement('div')
+      var Component = Regular.extend({});
+      var component = new Regular({
+        data: {test: true} ,
+        template: "{{#if !test}}<input r-model={{item}} value='1' />{{/if}}"
+      }).$inject(container)
+
+      component.$update("test", false);
+
+      expect(nes.one("input", container).value).to.equal('1');
+      expect(component.data.item).to.equal('1');
+
+      destroy(component, container);
+
+    })
+    it("r-model in list should works as expect", function(){
+      var container = document.createElement('div')
+      var Component = Regular.extend({});
+      var component = new Regular({
+        data: {test: true, hello: {}} ,
+        template: "{{#list [1,2,3,4] as item}}<input r-model={{hello.name}} value='1' />{{/list}}"
+      }).$inject(container)
+
+      expect(nes.one("input", container).value).to.equal('1');
+      expect(component.data.hello.name).to.equal('1');
+
+      destroy(component, container);
+
+    })
+
   })
 
 })