正文
前后台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>
