way.js中文文档

------------------（第一次翻译，不完全正确的地方请多包涵,仅供学习参考）
英文文档参考地址
简单的，轻量级的，持续的，双向数据邦定框架的JS库
少量的JS代码编写，且没有依赖性
codeopen

快速开始

HTLM标签类似于这样定义

 <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>

现在，表单里每个元素的改变都会存储在内存中。在页面加载时，存数的数据保留在。

安装

包含下列代码在你的页面即可
<script src="way.min.js"></script>

选项

例子

<form way-data="some.form" way-pick="some,properties,that,can.be.nested">
<form way-data="some.form" way-omit="dont,want.those">
<img way-data="some.image" way-default="http://upload.wikimedia.org/wikipedia/en/a/a6/Bender_Rodriguez.png">
<pre way-data="some.json" way-json="true"></pre>

Scopes

你可以在Html数据中设置scope(范围)

[way-scope] attribute

用该属性指出所有包含在这个范围内的子“way-data”

way.set("someScope", { with: { something: "hello" }})
<div way-scope="someScope">
  <div way-scope="with">
    <div way-data="something"></div> <!-- Will render "hello" -->
  </div>
</div>

[way-scope-break] attribute

打破scope链。这个元素的所有子元素将会没有范围设置。

way.set("someScope", { with: { something: "hello" }})
<div way-scope="someScope">
  <div way-scope-break="true">
    <div way-data="someScope.with.something"></div> <!-- Will render "hello" -->
  </div>
</div>

scope()方法

返回给定Dom元素的scope

<div way-scope="someScope">
  <div way-scope="with">
    <div way-data="something" id="someDIV"></div>
  </div>
</div>

way.dom("#someDIV").scope() 
>> "someScope.with"

Repeats

复制一个Dom元素的每个值，可以通过“way.js”循环传递数据
注释：
1.重复块会自动为子元素设置适当的范围。
2.在每一次循环中，“$$key”与对应当前循环到元素的key
设置

way.set("some.list", [
 {name:"Pierre"},
 {name:"Paul"},
 {name:"Jacques"}
]);

<div way-repeat="some.list">
 $$key - <span way-data="name"></span>
</div>

渲染后得到

<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>

Transforms

显示的值格式设定
[way-transform] attribute
如果有多个transforms,使用“|”分隔，如果多个transforms之间有冲突,将由最后一个提到的tansform决定

way.set("someData", "hello")

<div way-data="someData" way-transform="uppercase"></div>
<!-- Renders "HELLO" -->

egisterTransform(name, transform) 方法
自定义一个transform

way.set("someData", "hello");
way.registerTransform("lolify", function(data) {
 return data + " lol";
});

<div way-data="someData" way-transform="lolify|uppercase"></div>
<!-- Renders "HELLO LOL" -->

Helper elements

允许完成简单click任务
Example：

way.set("some.list", ["I", "am", "list"]);

<div id="clickToRemove" way-action-remove="some.list.2"></div>
<div id="clickToPush" way-action-push="some.list"></div>

$("#clickToRemove").click();
$("#clickToPush").click();
way.get("some.list");
>> ["I", "am", null]

Helper classes

对于图片而言，way.js允许给dom元素添加class,检测 load/error/success状态

way.set("image.url", "somethingThatsNotAnImageURL");

<img way-data="image.url">
<!-- Gets a class ".way-error" attributed -->

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