breaking: use 'bind' instead of 'model'

kbrsh · Sep 2, 2017 · 289a532 · 289a532
1 parent a67e761
commit 289a532
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 58 deletions.
diff --git a/dist/moon.js b/dist/moon.js
@@ -2247,7 +2247,7 @@
       }
     };
 
-    specialDirectives["m-model"] = {
+    specialDirectives["m-bind"] = {
       beforeGenerate: function(prop, node, parentNode, state) {
         var dependencies = state.dependencies;
         var exclude = state.exclude;
@@ -2274,7 +2274,7 @@
         if(dynamicIndex === -1) {
           code = "function(event) {instance.set(\"" + instanceKey + "\", " + instanceValue + ");}";
         } else {
-          code = "function(event) {var modelValue = instance.get(\"" + base + "\");modelValue" + properties + " = " + instanceValue + ";instance.set(\"" + base + "\", modelValue);}";
+          code = "function(event) {var boundValue = instance.get(\"" + base + "\");boundValue" + properties + " = " + instanceValue + ";instance.set(\"" + base + "\", boundValue);}";
         }
 
         node.meta.shouldRender = 1;

diff --git a/dist/moon.min.js b/dist/moon.min.js
diff --git a/src/directives/default.js b/src/directives/default.js
@@ -153,7 +153,7 @@ specialDirectives["m-on"] = {
   }
 };
 
-specialDirectives["m-model"] = {
+specialDirectives["m-bind"] = {
   beforeGenerate: function(prop, node, parentNode, state) {
     const dependencies = state.dependencies;
     const exclude = state.exclude;
@@ -180,7 +180,7 @@ specialDirectives["m-model"] = {
     if(dynamicIndex === -1) {
       code = `function(event) {instance.set("${instanceKey}", ${instanceValue});}`;
     } else {
-      code = `function(event) {var modelValue = instance.get("${base}");modelValue${properties} = ${instanceValue};instance.set("${base}", modelValue);}`;
+      code = `function(event) {var boundValue = instance.get("${base}");boundValue${properties} = ${instanceValue};instance.set("${base}", boundValue);}`;
     }
 
     node.meta.shouldRender = 1;

diff --git a/test/core/compiler/optimizer.js b/test/core/compiler/optimizer.js
@@ -170,19 +170,19 @@ describe("Compiler Optimization", function() {
     });
   });
 
-  describe("Model Directive", function() {
-    createTestElement("modelOptimizationStatic", "<input m-model='msg'/>");
-    createTestElement("modelOptimizationDynamic", "<input m-model='msg[index]'/>");
+  describe("Bind Directive", function() {
+    createTestElement("bindOptimizationStatic", "<input m-bind='msg'/>");
+    createTestElement("bindOptimizationDynamic", "<input m-bind='msg[index]'/>");
 
     var staticApp = new Moon({
-      root: "#modelOptimizationStatic",
+      root: "#bindOptimizationStatic",
       data: {
         msg: "Hello Moon!"
       }
     });
 
     var dynamicApp = new Moon({
-      root: "#modelOptimizationDynamic",
+      root: "#bindOptimizationDynamic",
       data: {
         msg: ["Hello Moon!"],
         index: 0

diff --git a/test/core/directives/model.js → test/core/directives/bind.js b/test/core/directives/model.js → test/core/directives/bind.js
@@ -1,11 +1,11 @@
-describe('Model Directive', function() {
+describe('Bind Directive', function() {
   describe("Static Text Input", function() {
-    var model = createTestElement("model", '<p>{{msg}}</p><input type="text" m-model="msg"/>');
-    var p = model.firstChild;
+    var bind = createTestElement("bind", '<p>{{msg}}</p><input type="text" m-bind="msg"/>');
+    var p = bind.firstChild;
     var input = p.nextSibling;
 
     var app = new Moon({
-      root: "#model",
+      root: "#bind",
       data: {
         msg: "Hello Moon!"
       }
@@ -43,49 +43,51 @@ describe('Model Directive', function() {
   });
 
 
-  // describe("Dynamic Text Input", function() {
-  //   var modelDynamic = createTestElement("modelDynamic", '<p>{{arr[index]}}</p><input type="text" m-model="arr[index]"/>');
-  //   var p = modelDynamic.firstChild;
-  //   var input = p.nextSibling;
-  //
-  //   var app = new Moon({
-  //     root: "#modelDynamic",
-  //     data: {
-  //       arr: ["Random", "Hello Moon!"],
-  //       index: 1
-  //     }
-  //   });
-  //
-  //   it('should have value when initialized', function() {
-  //     return wait(function() {
-  //       expect(p.innerHTML).to.equal('Hello Moon!');
-  //       expect(input.value).to.equal('Hello Moon!');
-  //     });
-  //   });
-  //
-  //   it('should update value from data', function() {
-  //     app.set("arr[1]", "ChangedData");
-  //
-  //     return wait(function() {
-  //       expect(input.value).to.equal('ChangedData');
-  //       expect(p.innerHTML).to.equal('ChangedData');
-  //     });
-  //   });
-  //
-  //   it('should update value from input', function() {
-  //     var inputEvent = new CustomEvent('input');
-  //     input.value = "Changed";
-  //     input.dispatchEvent(inputEvent);
-  //
-  //     return wait(function() {
-  //       expect(p.innerHTML).to.equal('Changed');
-  //     });
-  //   });
-  //
-  //   it('should not be present at runtime', function() {
-  //     expect(input.getAttribute("m-model")).to.be['null'];
-  //   });
-  // });
+  describe("Dynamic Text Input", function() {
+    var bindDynamic = createTestElement("bindDynamic", '<p>{{arr[index]}}</p><input type="text" m-bind="arr[index]"/>');
+    var p = bindDynamic.firstChild;
+    var input = p.nextSibling;
+
+    var app = new Moon({
+      root: "#bindDynamic",
+      data: {
+        arr: ["Random", "Hello Moon!"],
+        index: 1
+      }
+    });
+
+    it('should have value when initialized', function() {
+      return wait(function() {
+        expect(p.innerHTML).to.equal('Hello Moon!');
+        expect(input.value).to.equal('Hello Moon!');
+      });
+    });
+
+    it('should update value from data', function() {
+      var arr = app.get("arr");
+      arr[1] = "ChangedData";
+      app.set("arr", arr);
+
+      return wait(function() {
+        expect(input.value).to.equal('ChangedData');
+        expect(p.innerHTML).to.equal('ChangedData');
+      });
+    });
+
+    it('should update value from input', function() {
+      var inputEvent = new CustomEvent('input');
+      input.value = "Changed";
+      input.dispatchEvent(inputEvent);
+
+      return wait(function() {
+        expect(p.innerHTML).to.equal('Changed');
+      });
+    });
+
+    it('should not be present at runtime', function() {
+      expect(input.getAttribute("m-model")).to.be['null'];
+    });
+  });
 
   // describe("Checkbox", function() {
   //   var modelCheckbox = createTestElement("modelCheckbox", '<p>{{checked}}</p><input type="checkbox" m-model="checked"/>');

diff --git a/test/test.html b/test/test.html
@@ -34,7 +34,7 @@
   <script src="core/directives/else.js"></script>
   <script src="core/directives/literal.js"></script>
   <script src="core/directives/mask.js"></script>
-  <script src="core/directives/model.js"></script>
+  <script src="core/directives/bind.js"></script>
   <script src="core/directives/on.js"></script>
   <script src="core/directives/show.js"></script>
   <script src="core/plugin/plugin.js"></script>