Angularは、私は、双方向のデータバインディングのために見た中で最も印象的な選手です。プレーンな古いJavaScriptオブジェクトを使用してAngularスコープオブジェクトにアタッチし、スコープをDOMのセクションにバインドすることができます。 Angular 0.9の例を以下に示します。 (角1.0は、同じことを達成するために非常に異なるAPIを使用しています。)
// angular.compile() returns a databinding function
var databind = angular.compile(document.documentElement);
var model = angular.scope();
// add data to the scope object
model.greeting = "Hello, World!";
model.colors = ["red", "green", "blue"];
// hook 'em up
databind(model);
をあなたがフォームコントロールを含め、データバインディングのためのHTMLに角度表現を使用することができます。
<!DOCTYPE html>
<input name="greeting" />
<span ng:repeat="color in colors" style="color: {{color}}">
{{color}}
</span>
この場合、スコープオブジェクトのグリーティングプロパティは、テキストボックスのすべてのキーストロークで更新されます。
また、HTMLでデータバインディング式を使用したくない場合は、すべて手動で行うことができます。
model.$watch("greeting", function (value) {
// when the greeting changes, update the DOM
$("input[name=greeting]").val(value);
});
スコープオブジェクトを更新して$ eval()を呼び出すたびに、変更されたものがあれば、リスナーに通知されます。
model.greeting = "Hi.";
model.$eval();
そして、スコープに添付されたものに変更を加え、その$ eval()メソッドを呼び出すと、HTMLが自動的に更新されることが最も重要です。代わりに、プレーンJavaScriptのオブジェクト、配列、文字列、数字での作業のため、あなたがデータバインディングを行うために、そのObservable
とObservableArray
クラスのインスタンスを作成する必要がありますので、
model.colors.append("yellow");
model.colors.sort();
model.$eval(); // notifies listeners, including bound HTML
ノックアウトJSは劣っています。
お楽しみください!
その男に働きかけてください。私が見た他のデータバインディングよりも軽量です。そして、より明確に。 – stringparser
@phoenix、ありがとう!我々はちょうどベータにプロジェクトを開始した。あなたがそれが好きであることを見て非常に興奮しています。 – tjscience