------------------（第一次翻譯唯竹，不完全正確的地方請(qǐng)多包涵,僅供學(xué)習(xí)參考）
英文文檔參考地址
簡(jiǎn)單的篱竭，輕量級(jí)的，持續(xù)的爽篷，雙向數(shù)據(jù)邦定框架的JS庫(kù)
少量的JS代碼編寫绑咱，且沒有依賴性
codeopen
快速開始
HTLM標(biāo)簽類似于這樣定義
<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>
現(xiàn)在绰筛，表單里每個(gè)元素的改變都會(huì)存儲(chǔ)在內(nèi)存中。在頁(yè)面加載時(shí)描融，存數(shù)的數(shù)據(jù)保留在铝噩。
安裝
包含下列代碼在你的頁(yè)面即可
<script src="way.min.js"></script>
選項(xiàng)
| name | type | default | description |
|---|---|---|---|
| data | string | null | 允許定義點(diǎn)分隔的路徑當(dāng)數(shù)據(jù)被存儲(chǔ)時(shí)。包含數(shù)組窿克，當(dāng)使用一個(gè)表單時(shí)骏庸，包含所有inputs name屬性的json被創(chuàng)建和存儲(chǔ)在固定的存儲(chǔ)中。通過"__all__" 可以獲取所有的 way.js' 數(shù)據(jù)让歼。 |
| default | string | null | 一個(gè)鏈接到一個(gè)默認(rèn)數(shù)據(jù)設(shè)置在一個(gè)元素上敞恋，確保在沒有綁定值的情況下丽啡。 |
| persistent | boolean | true | 當(dāng)綁定的值改變時(shí)谋右，允許數(shù)據(jù)存儲(chǔ)到localStorage |
| readonly | boolean | false | 防止元素改變重置綁定值 |
| writeonly | Boolean | false | 防止元素綁定值改變時(shí)改變。 |
| json | boolean | false | 返回json格式到dom頁(yè)面 |
| html | boolean | false | 聲明數(shù)據(jù)屬性是否能被HTML解析 |
| pick | array | null | 一個(gè)逗號(hào)分隔的值列表選擇（僅在表單中）與存儲(chǔ)同步补箍。默認(rèn)情況下改执，所有表單的input同步啸蜜。 |
| omit | array | null | 一個(gè)逗號(hào)分隔的值列表選擇（僅在表單中）與存儲(chǔ)同步。 |
例子
<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數(shù)據(jù)中設(shè)置scope(范圍)
[way-scope] attribute
用該屬性指出所有包含在這個(gè)范圍內(nèi)的子“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鏈辈挂。這個(gè)元素的所有子元素將會(huì)沒有范圍設(shè)置衬横。
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
復(fù)制一個(gè)Dom元素的每個(gè)值，可以通過“way.js”循環(huán)傳遞數(shù)據(jù)
注釋：
1.重復(fù)塊會(huì)自動(dòng)為子元素設(shè)置適當(dāng)?shù)姆秶?br>
2.在每一次循環(huán)中终蒂，“$$key”與對(duì)應(yīng)當(dāng)前循環(huán)到元素的key
設(shè)置
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
顯示的值格式設(shè)定
[way-transform] attribute
如果有多個(gè)transforms,使用“|”分隔蜂林，如果多個(gè)transforms之間有沖突,將由最后一個(gè)提到的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")
<div way-data="someData" way-transform="uppercase"></div>
<!-- Renders "HELLO" -->
egisterTransform(name, transform) 方法
自定義一個(gè)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
允許完成簡(jiǎn)單click任務(wù)
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
對(duì)于圖片而言，way.js允許給dom元素添加class,檢測(cè) load/error/success狀態(tài)
| 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");
<img way-data="image.url">
<!-- Gets a class ".way-error" attributed -->
Methods
HTML 標(biāo)簽就已經(jīng)可以完成很多功能拇泣，但如果有必要噪叙，你也可以使用輔助功能在存儲(chǔ)數(shù)據(jù)和Dom元素之間進(jìn)行交互。
注釋
1.[element]可以作為dom元素的css選擇器
2.[options]是可選的霉翔。缺省情況下睁蕾，options讀取Html標(biāo)簽。但是你可以通過傳遞參數(shù)重寫他們债朵。
DOM methods
way.dom(element).toStorage(options)
存儲(chǔ)這個(gè)元素的值到內(nèi)存中去
way.dom("#someForm").toStorage()
從內(nèi)存中設(shè)置元素的值
way.dom("#someForm").fromStorage()
way.dom(element).toJSON(options)
但會(huì)一個(gè)input解析數(shù)據(jù)的json（尤其是方便表單處理）
way.dom("#someForm").toJSON()
>> {
its: "values",
serialized: {
in: "a json"
}
}
way.dom(element).fromJSON(data, options)
從json數(shù)據(jù)中設(shè)置元素的值
way.dom("#someForm").fromJSON({name:"John Doe"})
way.dom(element).getValue()
返回dom元素的json值
way.dom("#someForm").getValue()
way.dom(element).setValue(value, options)
從json數(shù)據(jù)中設(shè)置元素的值
way.dom("#someForm").setValue({name:"John Doe"})
way.dom(element).setDefault(force)
設(shè)置一個(gè)元素的缺省值子眶。默認(rèn)情況下，dom元素的值為缺省值序芦。其綁定值在數(shù)據(jù)存儲(chǔ)不變臭杰。如果你需要強(qiáng)制設(shè)置這個(gè)內(nèi)存中的缺省值，通過[force]參數(shù)
way.dom("#someForm").setDefault()
way.setDefaults(force)
設(shè)置所有綁定dom元素的缺省值
way.setDefaults()
way.dom(element).getOptions()
返回dom元素 ["way-"] options列表
way.dom("#someForm").getOptions()
Data methods
way.get(selector)
返回一個(gè)給定的路徑名存儲(chǔ)數(shù)據(jù)的值
way.get("some.path");
>> "bonjour"
way.set(selector, value, options)
在指定路徑名下存儲(chǔ)數(shù)據(jù)值
way.set("some.path", "bonjour!");
way.remove(selector, options)
移除給定路徑名下的存儲(chǔ)值
way.remove("some.path");
way.get("some.path");
>> undefined
way.clear(options)
清除所有數(shù)據(jù)
way.clear();
way.get();
>> {}
localStorage methods
way.backup()
將way.js中的存儲(chǔ)數(shù)據(jù)保存到localStorage
way.backup();
way.restore()
回復(fù)在localStorage中的數(shù)據(jù)芝加。Called on $(document).ready by default (can be changed with global options).
way.restore();
Binding methods
way.registerBindings()
觸發(fā)dom搜索找到并保存這個(gè)元素的[way-data]屬性硅卢，綁定一些數(shù)據(jù)
way.registerBindings()
設(shè)置了綁定data選擇器的dom元素的值。如果omitted藏杖，所有way-data屬性的dom元素將會(huì)被刷新（excluding write-only's and omitted）
way.updateBindings("formData.name")
Repeat methods
way.registerRepeats()
觸發(fā)dom搜索找到并保存這個(gè)元素的[way-repeat]屬性将塑，綁定一些數(shù)據(jù)
way.registerRepeats()
way.updateRepeats(selector)
觸發(fā)更新重復(fù)元素各自的值
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中存儲(chǔ)數(shù)據(jù)的變化
way.watchAll(function(selector, value) {
console.log("The data " + selector + " has been changed.", value);
});
Global options
way.options.persistent (Boolean)
當(dāng)document.ready (true by default)時(shí)，設(shè)置是否從localstorage中恢復(fù)數(shù)據(jù)
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
