JQueryテンプレート:(九)JsRenderのJsViewsのJsObserverable
2752 ワード
一、JsObserverableとは何ですか.
JsObservable libraryはJsViewsの一部であり、JsViewsでデータバインド機能を提供するために使用されます.同様に、JsViewsのアプリケーションがデータの変化をトリガすることを可能にし、プログラム方式(JsObserverable API)を使用してデータの変化を「観察」してデータバインド機能を実現し、データはobserverable(可視)であり、このデータ(可視データ)の変化がバインドされたtemplateのデータのタイムリーな変化を引き起こすことを意味する.
二、インスタンスコード:
コード解読:
1) JsObservable API:$.observable(object).setProperty(...);
$.observable(dataItem)はdataItemを可視化し、setProperty()メソッドにより、templateで宣言された動的バインドによって関連する変化が観察されます.すなわち、関連する変化は、バインドされた動的データの変化を引き起こします.
2)
JsObservable API:
$.observable(array).insert(...);
$.observable(people)はpeopleという配列を可視化し、方法insert()とremove()を提供することによって、配列の変化も可視であることを示す.すなわちtemplateにバインドされた要素とラベル、例えば
{^{for people}}
おみくじも変わります.
3)JsObservable API: .view(elem)
.view(elem)は、任意のDOM要素を現在可視のObjectにするために使用する.
JsObservable libraryはJsViewsの一部であり、JsViewsでデータバインド機能を提供するために使用されます.同様に、JsViewsのアプリケーションがデータの変化をトリガすることを可能にし、プログラム方式(JsObserverable API)を使用してデータの変化を「観察」してデータバインド機能を実現し、データはobserverable(可視)であり、このデータ(可視データ)の変化がバインドされたtemplateのデータのタイムリーな変化を引き起こすことを意味する.
二、インスタンスコード:
<!DOCTYPE html>
<html>
<head>
<link href="../css/samples.css" rel="stylesheet"/>
<script src="../jquery/jquery-2.0.3.js"></script>
<script src="../jsviews/jsviews.js"></script>
</head>
<body>
<table><tbody id="result"></tbody></table>
<script id="theTmpl" type="text/x-jsrender">
<tr><td>
<button id="addBtn">Add</button>
</td></tr>
{^{for people}}
<tr><td>
<button class="change">Change</button>
<button class="remove">X</button>
{^{:name}}
</td></tr>
{{/for}}
</script>
<script>
var template = $.templates("#theTmpl");
var people = [
{
name: "JoshWang"
},
{
name: "WangSheng"
}
];
var counter = 1;
template.link("#result", {people: people});
$("#addBtn").on("click", function(){
$.observable(people).insert(people.length, {name: "name" + counter++});
})
$("#result")
.on("click", ".change", function(){
var dataItem = $.view(this).data;
$.observable(dataItem).setProperty("name", dataItem.name + "*");
})
.on("click", ".remove", function(){
var index = $.view(this).index;
$.observable(people).remove(index);
});
</script>
</body>
</html>
コード解読:
1) JsObservable API:$.observable(object).setProperty(...);
$.observable(dataItem)はdataItemを可視化し、setProperty()メソッドにより、templateで宣言された動的バインドによって関連する変化が観察されます.すなわち、関連する変化は、バインドされた動的データの変化を引き起こします.
2)
JsObservable API:
$.observable(array).insert(...);
$.observable(people)はpeopleという配列を可視化し、方法insert()とremove()を提供することによって、配列の変化も可視であることを示す.すなわちtemplateにバインドされた要素とラベル、例えば
{^{for people}}
おみくじも変わります.
3)JsObservable API: .view(elem)
.view(elem)は、任意のDOM要素を現在可視のObjectにするために使用する.