------------------（第一次翻译，不完全正确的地方请多包涵,仅供学习参考）
英文文档参考地址
简单的，轻量级的，持续的，双向数据邦定框架的JS库
少量的JS代码编写，且没有依赖性
codeopen
快速开始
HTLM标签类似于这样定义
Name:
现在，表单里每个元素的改变都会存储在内存中。在页面加载时，存数的数据保留在。
安装
包含下列代码在你的页面即可
选项
| name | type | default | description |
|---|---|---|---|
| data | string | null | 允许定义点分隔的路径当数据被存储时。包含数组，当使用一个表单时，包含所有inputs name属性的json被创建和存储在固定的存储中。通过"__all__" 可以获取所有的 way.js' 数据。 |
| default | string | null | 一个链接到一个默认数据设置在一个元素上，确保在没有绑定值的情况下。 |
| persistent | boolean | true | 当绑定的值改变时，允许数据存储到localStorage |
| readonly | boolean | false | 防止元素改变重置绑定值 |
| writeonly | Boolean | false | 防止元素绑定值改变时改变。 |
| json | boolean | false | 返回json格式到dom页面 |
| html | boolean | false | 声明数据属性是否能被HTML解析 |
| pick | array | null | 一个逗号分隔的值列表选择（仅在表单中）与存储同步。默认情况下，所有表单的input同步。 |
| omit | array | null | 一个逗号分隔的值列表选择（仅在表单中）与存储同步。 |
例子
Scopes
你可以在Html数据中设置scope(范围)
[way-scope] attribute
用该属性指出所有包含在这个范围内的子“way-data”
way.set("someScope", { with: { something: "hello" }})
[way-scope-break] attribute
打破scope链。这个元素的所有子元素将会没有范围设置。
way.set("someScope", { with: { something: "hello" }})
scope()方法
返回给定Dom元素的scope
way.dom("#someDIV").scope()
>> "someScope.with"
Repeats
复制一个Dom元素的每个值，可以通过“way.js”循环传递数据
注释：
1.重复块会自动为子元素设置适当的范围。
2.在每一次循环中，“$$key”与对应当前循环到元素的key
设置
way.set("some.list", [
{name:"Pierre"},
{name:"Paul"},
{name:"Jacques"}
]);
$$key -
渲染后得到
0 - Pierre
1 - Paul
2 - Jacques
Transforms
显示的值格式设定
[way-transform] attribute
如果有多个transforms,使用“|”分隔，如果多个transforms之间有冲突,将由最后一个提到的tansform决定
| Name | Description | Example |
|---|---|---|
| uppercase | Sets a string to uppercase | "hello" becomes "HELLO" |
| lowercase | Sets a string to lowercase | "HELLO" becomes "hello" |
| reverse | Reverses a string | "hello" becomes "olleh" |
way.set("someData", "hello")
egisterTransform(name, transform) 方法
自定义一个transform
way.set("someData", "hello");
way.registerTransform("lolify", function(data) {
return data + " lol";
});
Helper elements
允许完成简单click任务
Example：
way.set("some.list", ["I", "am", "list"]);
$("#clickToRemove").click();
$("#clickToPush").click();
way.get("some.list");
>> ["I", "am", null]
Helper classes
对于图片而言，way.js允许给dom元素添加class,检测 load/error/success状态
| class | Description |
|---|---|
| way-loading | When an image is getting downloaded to a DOM element |
| way-error | When no image is returned from the URL provided |
| way-success | When... Well, you got it. |
way.set("image.url", "somethingThatsNotAnImageURL");
![]()
Methods
HTML 标签就已经可以完成很多功能，但如果有必要，你也可以使用辅助功能在存储数据和Dom元素之间进行交互。
注释
1.[element]可以作为dom元素的css选择器
2.[options]是可选的。缺省情况下，options读取Html标签。但是你可以通过传递参数重写他们。
DOM methods
way.dom(element).toStorage(options)
存储这个元素的值到内存中去
way.dom("#someForm").toStorage()
从内存中设置元素的值
way.dom("#someForm").fromStorage()
way.dom(element).toJSON(options)
但会一个input解析数据的json（尤其是方便表单处理）
way.dom("#someForm").toJSON()
>> {
its: "values",
serialized: {
in: "a json"
}
}
way.dom(element).fromJSON(data, options)
从json数据中设置元素的值
way.dom("#someForm").fromJSON({name:"John Doe"})
way.dom(element).getValue()
返回dom元素的json值
way.dom("#someForm").getValue()
way.dom(element).setValue(value, options)
从json数据中设置元素的值
way.dom("#someForm").setValue({name:"John Doe"})
way.dom(element).setDefault(force)
设置一个元素的缺省值。默认情况下，dom元素的值为缺省值。其绑定值在数据存储不变。如果你需要强制设置这个内存中的缺省值，通过[force]参数
way.dom("#someForm").setDefault()
way.setDefaults(force)
设置所有绑定dom元素的缺省值
way.setDefaults()
way.dom(element).getOptions()
返回dom元素 ["way-"] options列表
way.dom("#someForm").getOptions()
Data methods
way.get(selector)
返回一个给定的路径名存储数据的值
way.get("some.path");
>> "bonjour"
way.set(selector, value, options)
在指定路径名下存储数据值
way.set("some.path", "bonjour!");
way.remove(selector, options)
移除给定路径名下的存储值
way.remove("some.path");
way.get("some.path");
>> undefined
way.clear(options)
清除所有数据
way.clear();
way.get();
>> {}
localStorage methods
way.backup()
将way.js中的存储数据保存到localStorage
way.backup();
way.restore()
回复在localStorage中的数据。Called on $(document).ready by default (can be changed with global options).
way.restore();
Binding methods
way.registerBindings()
触发dom搜索找到并保存这个元素的[way-data]属性，绑定一些数据
way.registerBindings()
设置了绑定data选择器的dom元素的值。如果omitted，所有way-data属性的dom元素将会被刷新（excluding write-only's and omitted）
way.updateBindings("formData.name")
Repeat methods
way.registerRepeats()
触发dom搜索找到并保存这个元素的[way-repeat]属性，绑定一些数据
way.registerRepeats()
way.updateRepeats(selector)
触发更新重复元素各自的值
way.updateRepeats("somethingToBeLooped")
Watcher methods
way.watch(selector, callback[value])
观察给定值的变化
way.watch("some.data", function(value) {
console.log("Data has been updated to value: " + value);
});
way.watchAll(callback[selector, value])
观察所有way.js中存储数据的变化
way.watchAll(function(selector, value) {
console.log("The data " + selector + " has been changed.", value);
});
Global options
way.options.persistent (Boolean)
当document.ready (true by default)时，设置是否从localstorage中恢复数据
way.options.persistent = true
way.options.timeoutInput (Number)
Number of milliseconds of the timeout between keypresses on bound elements to store their values to the datastore (50 by default).
way.options.timeoutInput = 50
way.options.timeoutDOM (Number)
Number of milliseconds of the timeout between scans of the DOM to list bound elements on each DOM change (500 by default).
way.options.timeoutDOM = 500