前后台json数据绑定——way.JS
- 依赖于JQ
- 01_页面值-页面值绑定.html
- 02_List绑定多个相同模型.html
- 0201_先set,再DOm添加。再get.html
- 03_绑定多个不同模型.html
- 04_继承03用类.方法名的形式.html
- 05_返回给定的DOM元素的范围.html
- 06_大写小写反写主要英文.html
- 07_List绑定多个模型-删除部分模型.html
- 09_01_DOM方法.html
- 09_02_data方法.html
- 09_03_localStorage方法.html
- 09_04_Bind方法.html
- 09_05_其他方法.html
JQ.js way.js
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="../Scripts/way.js"></script> <script src="../Scripts/jquery-1.7.1.min.js"></script> </head> <body> <form way-data="myFormData" way-persistent="true"> <input type="text" name="name"> <input type="text" name="age"> <input type="text" name="gender"> </form> Name: <span way-data="myFormData.name"></span> </body> </html>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>重复一个DOM元素的值可以遍历的方式。js的传递数据。</title> <script src="../Scripts/way.js"></script> <script src="../Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function () { way.set("some.list", [ { name: "Pierre", age: 23, phone: "13390907878" }, { name: "Paul", age: 24, phone: "13390907878" }, { name: "Jacques", age: 25, phone: "13390907878" } ]); }); </script> </head> <body> <form> <div>自己的div</div> <div way-repeat="some.list"> <span way-data="name"></span> <span way-data="age"></span> <span way-data="phone"></span> </div> <!-- 使用下面的展现方式， 可以直接使用 way-scope=[] 类似下标的去访问。 <div way-scope="some.list"> <div way-scope="0"> 0 - <span way-data="name">Pierre</span> </div> <div way-scope="1"> 1 - <span way-data="name">Paul</span> </div> <div way-scope="2"> 2 - <span way-data="name">Jacques</span> </div> </div> --> </form> </body> </html>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>重复一个DOM元素的值可以遍历的方式。js的传递数据。</title> <script src="../Scripts/way.js"></script> <script src="../Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function () { way.set("some.list", [ { name: "Pierre", age: 23, phone: "13390907878" }, { name: "Paul", age: 24, phone: "13390907878" }, { name: "Jacques", age: 25, phone: "13390907878" } ]); }); function diannimei() { var html = ''; html = "<div way-scope='1'><span way-data=name'>关亚君</span><span way-data='age'>25</span><span way-data='phone'>18330908989</span></div>"; $(".nidaye").append(html); } </script> </head> <body> <form> <div>自己的div</div> <div class="nidaye" way-repeat="some.list"> <span way-data="name"></span> <span way-data="age"></span> <span way-data="phone"></span> </div> <a href="#" onclick="diannimei()">点点</a> <!-- 使用下面的展现方式， 可以直接使用 way-scope=[] 类似下标的去访问。 <div way-scope="some.list"> <div way-scope="0"> 0 - <span way-data="name">Pierre</span> </div> <div way-scope="1"> 1 - <span way-data="name">Paul</span> </div> <div way-scope="2"> 2 - <span way-data="name">Jacques</span> </div> </div> --> </form> </body> </html>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>[way-scope] attribute</title> <script src="../Scripts/way.js"></script> <script src="../Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function () { way.set("someScope", { with: { something: "hello", name: "张三", age: "23", note: "测试" }, nation: { where: "中国", Address: "北京" } }) }); </script> </head> <body> <div way-scope="someScope"> <div way-scope="with"> <div way-data="something"></div> <div way-data="name"></div> <div way-data="note"></div> <!-- Will render "hello" --> </div> <div way-scope="nation"> <div way-data="where"></div> <div way-data="Address"></div> <!-- Will render "hello" --> </div> </div> </body> </html>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>[way-scope-break] attribute</title> <script src="../Scripts/way.js"></script> <script src="../Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function () { way.set("someScope", { with: { something: "hello" } }) }); </script> </head> <body> <div way-scope="someScope"> <div way-scope-break="true"> <div way-data="someScope.with.something"></div> <!-- Will render "hello" --> </div> </div> </body> </html>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="../Scripts/way.js"></script> <script src="../Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function () { var dd = way.dom("#someDIV").scope(); alert(dd); //someScope.with }); </script> </head> <body> <div way-scope="someScope"> <div way-scope="with"> <div way-data="something" id="someDIV"></div> </div> </div> </body> </html>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="../Scripts/way.js"></script> <script src="../Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function () { way.set("someData", "hello") }); </script> <style type="text/css"> tr td { border: 2px solid red; } </style> </head> <body> <div way-data="someData" way-transform="uppercase"></div> <table style="border: 2px solid red;" > <thead> <tr> <th>Name</th> <th>Description</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>uppercase</td> <td>Sets a string to uppercase</td> <td>"hello" becomes "HELLO"</td> </tr> <tr> <td>lowercase</td> <td>Sets a string to lowercase</td> <td>"HELLO" becomes "hello"</td> </tr> <tr> <td>reverse</td> <td>Reverses a string</td> <td>"hello" becomes "olleh"</td> </tr> </tbody> </table> </body> </html>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>移出部分模型，展现。</title> <script src="../Scripts/way.js"></script> <script src="../Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function () { way.set("some.list", ["I", "am", "list"]); }); </script> </head> <body> <div way-data="some.list.0"></div> <!--<div id="clickToRemove" way-action-remove="some.list.2"></div> <div id="clickToPush" way-action-push="some.list"></div>--> </body> </html>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="../Scripts/way.js"></script> <script src="../Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function () { //1.way.dom(element).toStorage(options) Stores the element's value to the in-store memory. way.dom("#someForm").toStorage() //2.way.dom(element).fromStorage(options) Sets the element's value from the stored one.设置从存储一个元素的值。 way.dom("#someForm").fromStorage() //3.way.dom(element).toJSON(options) 返回一个JSON解析数据的 way.dom("#someForm").toJSON() //4.way.dom(element).fromJSON(data, options) 设置元素的值从任何数据(json)。 way.dom("#someForm").fromJSON({ name: "John Doe" }) //5.way.dom(element).getValue() 返回一个JSON结构,其中包含DOM元素的值。 way.dom("#someForm").getValue() //6.way.dom(element).setValue(value, options) 设置元素的值从任何数据(json)。 way.dom("#someForm").setValue({ name: "John Doe" }) //7.way.dom(element).setDefault(force) 设置一个元素的默认值。默认情况下,只有DOM元素的值设置为默认值。其绑定值在数据存储不变。通过[force]参数如果你需要强制设置内存值数据元素的默认值。 way.dom("#someForm").setDefault() //8.way.setDefaults(force) 设置所有绑定DOM元素的默认值。 way.setDefaults() //9.way.dom(element).getOptions() 返回 the list of the ["way-"] 选择标记DOM元素。 way.dom("#someForm").getOptions() }); </script> </head> <body> way.dom(element).toStorage(options) </body> </html>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Data methods</title> <script src="../Scripts/way.js"></script> <script src="../Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function () { way.set("some.path", "bonjour!"); //1.way.get(selector) 返回值的数据储存在一个给定的路径名。 way.get("some.path"); // "bonjour" //2.way.set(selector, value, options)保存的数据在内存中指定的路径名。 way.set("some.path", "bonjour!"); //3.way.remove(selector, options) 删除的数据存储在一个给定的路径名。 way.remove("some.path"); way.get("some.path"); // undefined //4.way.clear(options) 清除所有的数据。 way.clear(); way.get(); // {} }); </script> </head> <body> </body> </html>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="../Scripts/way.js"></script> <script src="../Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function () { //1.way.backup() 保存在方式存储数据。js localStorage的数据存储。 way.backup(); //2.way.restore() Restores the data saved in localStorage. Called on $(document).ready by default (can be changed with global options).恢复的数据保存在本地文件。呼吁美元(文档)。准备在默认情况下(与全球选项可以改变)。 way.restore(); }); </script> </head> <body> </body> </html>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="../Scripts/way.js"></script> <script src="../Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function () { //1.way.registerBindings() //Triggers a scan of the DOM to find and save the elements with the [way-data] attribute, that will be bound with some data. //触发扫描的DOM找到并保存(数据)的元素属性,用一些数据。 way.registerBindings() //2.way.updateBindings(selector) //Sets the value of all the DOM elements binded to a data selector with their values in way.js' datastore. If omitted, all (excluding write-only's and omitted) DOM elements with a "way-data=" attribute will be refreshed. //集所有DOM元素的值绑定到数据选择器的方式与他们的价值观。js的数据存储。如果省略,所有(不含只写和省略)DOM元素与“数据= "属性将刷新。 way.updateBindings("formData.name") }); </script> </head> <body> </body> </html>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="../Scripts/way.js"></script> <script src="../Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function () { //一、Repeat methods //1.way.registerRepeats() //Triggers a scan of the DOM to find and save the elements with the [way-repeat] attribute, that will be bound with some data. //触发扫描的DOM找到并保存(way-repeat)的元素属性,用一些数据。 way.registerRepeats() //2.way.updateRepeats(selector) //Triggers a refresh of the repeat elements with their respective data. //触发器的刷新重复元素与各自的数据。 way.updateRepeats("somethingToBeLooped") //二、Watcher methods //1.way.watch(selector, callback[value]) //给定值的变化。 way.watch("some.data", function (value) { console.log("Data has been updated to value: " + value); }); //2.way.watchAll(callback[selector, value]) //Watches all changes in way.js' datastore. way.watchAll(function (selector, value) { console.log("The data " + selector + " has been changed.", value); }); }); </script> </head> <body> </body> </html>
