------------------（第一次翻譯，不完全正確的地方請多包涵,僅供學習參考）
英文文檔參考地址
簡單的，輕量級的，持續的，雙向數據邦定框架的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