前后台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>
前后台json数据绑定——way.JS的更多相关文章
- JSON字符串和JS对象之间的转换
JSON字符串和JS对象之间的转换 1 json字符串转换为js对象 1.1 标准json格式字符串转换为Js对象 JSON字符串 str JSON.parse(str) eval(str) eva ...
- (转)JSON数据格式和js操作json总结
原:http://niutuku.com/tech/javaScript/273643.shtml JSON数据格式和js操作json总结 来源:niutuku.com | vince ...
- arguments.callee 调用函数自身用法----JSON.parse()和JSON.stringify()前端js数据转换json格式
arguments.callee 调用函数自身用法 arguments.callee 在哪一个函数中运行,它就代表哪个函数. 一般用在匿名函数中. 在匿名函数中有时会需要自己调用自己,但是由于是匿名函 ...
- json,json对象以及js对象字面量的区别
从定义看: json:一种数据交换格式 json对象:js的一个内置对象,拥有JSON.stringify()和JSON.parse()两个方法 js对象字面量:封闭在花括号对({})中的一个对象的零 ...
- ajax返回json时，js获取类型，是字符串类型
ajax向php服务端请求,并返回json串给前端. js发现得到的返回值的类型是字符串,不能直接取json对象属性,需要JSON.parse(). 怎么解决呢? 这需要在php返回json时,加上一 ...
- express 项目前后台公用样式 /static/js/bootstrap.min.js
express 项目前后台公用样式 /static/js/bootstrap.min.js
- 使用JSON语法创建JS对象(重要)
JS对象的键值可以加单引号或者不加或者加双引号 JSON语法提供了一种更简单的方式来创建对象,可以避免书写函数,也可避免用new关键字,可以直接创建一个JS对象,使用一个花括号,然后将每个属性写成&q ...
- js中json数据简单处理（JSON.parse()和js中嵌套html）
js中json数据简单处理(JSON.parse()和js中嵌套html) 一.总结 1.html中嵌套js:<script>js代码</script> 2.js中嵌套html ...
- 浅谈JSON与与JS相关的JSON函数
本文内容主要引用在微信公众号上看到的一片文章,因为自己对Json了解不是很深入,所以就整理出这篇博文与大家分享! 一. JSON是一种格式,基于文本,优于轻量,用于交换数据 1.一种数据格式 数据的传 ...
随机推荐
- js ie中实现拖拽
获取鼠标移动信息 开始我们需要获取鼠标的坐标．我们添加一个document.onmousemove 就可以达到此目的: Javascript: document.onmousemove = mou ...
- MVC复杂模型绑定
当初遇到业务需求ajax提交一组对象数组到服务器.但是苦于mvc的默认绑定器.绑定不上去.好吧只有靠自己了. 当初就是参考这个大大的博客:http://www.cnblogs.com/xfrog/ar ...
- 编程结构：Promise和Future
非阻塞模型中Promise,Future 和 Callback一些比较常用的模型: Future表示一个可能还没有实际完成的异步任务结果:实际在编程中,应用future数据结构的时候,你得到并不是一个 ...
- Alpha阶段第二次Scrum Meeting
情况简述 Alpha阶段第一次Scrum Meeting 敏捷开发起始时间 2016/10/21 00:00 敏捷开发终止时间 2016/10/22 00:00 会议基本内容摘要 汇报了已经完成的任务 ...
- python异常处理
1. 异常 (1) 异常处理 #没有异常处理 num = int('abc') print(num) #报错 #异常处理 try: num = int('abc') #try里的代码是受保护的 pri ...
- 对于angularJS的一点思考
已经找好工作近两周了,入职基本上还算顺利,自己两年来的挑灯夜战也算是有了收获,于是这两周基本上是按部就班的工作,没有学习什么新技术.在上个公司的时候,同事在项目中使用angularJs,之前他也没有接 ...
- 自定义Docker容器的 hostname
自定义Docker容器的 hostname 作者: John Deng 原创内容,欢迎传播,请注明出处:http://www.cnblogs.com/johnd/p/set-docker-host ...
- python学习笔记-（十六）python操作mysql
一. mysql安装 1. windows下安装mysql 1.1. 下载源: http://dev.mysql.com/downloads/installer/,请认准对应版本 Windows (x ...
- Logstash-5.0同步.json文件到ElasticSearch-5.0配置文件
logstash/conf/input-file.conf内容如下: input { file { #监听文件的路径. path => ["E:/data_json/*.json&qu ...
- [Unity3D]粒子系统学习笔记
粒子阴影的处理 通过Material填充粒子系统的render后,默认是显示阴影的: 可以通过设置来调整: 调整后的效果, 每个粒子就没有阴影了 增加粒子效果 设置为合成的材质,效果显示加倍: 添加子 ...