2011-01-08 15 views
5

jQueryなどの豊富なWebサービスとクライアントサイドのテンプレート機能により、マッシュアップや多数のWebサービスを消費するサイトを作成し、これらのサービスにデータをポストすることは非常に人気が高くなっています。このようなアーキテクチャのある適切なサイズのページについては、ダッシュボードを挙げてください。このクライアントサイドの状態を維持するための便利なテクニックは何ですか?言い換えれば、双方向データバインディングを行う方法のいくつかは何ですか? サンプルシナリオ:jsとの双方向データバインディングの最も有用なテクニック

  1. サービスからデータを取得し、JSON/XMLサービスへ
  2. UI上の表示/バインド
  3. キャプチャユーザー入力
  4. UIコントロールから
  5. 再作成要求/ htmlの
  6. ポストデータなど
  7. レスポンスとリバンドを取得する

答えて

4

jQueryでは、 asilyは、サービスを呼び出すページロードのAJAX要求を行い、オブジェクトを返し、jQuery Templatesプラグインを使用してそのオブジェクトをフォームにバインドします。フォームを送信する必要がある場合は、jQuery Formプラグインを使用してAJAX経由でサービスに送信し、JSONオブジェクトを返し、jQuery Templatesプラグインコンテナ(フォーム)にバインドします。


また、フォームを送信するためのjQuery "フォーム"プラグインと、実行したいバインディングの種類に関するKnockOut JavaScriptライブラリを組み合わせることもできます。

http://knockoutjs.com/

で見るノックアウトJSライブラリの詳細最初の二つの特徴が記載されているとしては、以下のとおりです。

  • Declerativeバインディング
  • 自動UI更新

は非常にためにこのライブの例を参照してください。小紹介http://knockoutjs.com/examples/helloWorld.html


更新:

この回答は最近upvoteを得たので、それはそれは非常に多くのことを行うことができ、より大きな枠組みのビットだ、angularJS、町に比較的新しい子供を言及することも重要です2ウェイ・データ・バインディングを実行することはこれまでに最も簡単なことです。

公式URL:http://angularjs.org

例:http://docs.angularjs.org/guide/forms

http://gurustop.net

3

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のオブジェクト、配列、文​​字列、数字での作業のため、あなたがデータバインディングを行うために、そのObservableObservableArrayクラスのインスタンスを作成する必要がありますので、

model.colors.append("yellow"); 
model.colors.sort(); 
model.$eval(); // notifies listeners, including bound HTML 

ノックアウトJSは劣っています。

お楽しみください!

1

私はLava JS(http://lava.codeplex.com)を見ていきます。それは非常に良いデータバインディングを持っており、使用するのが非常に邪魔になりません。また、サーバーへのデータのフェッチ/ポストもサポートしています。

+1

その男に働きかけてください。私が見た他のデータバインディングよりも軽量です。そして、より明確に。 – stringparser

+0

@phoenix、ありがとう!我々はちょうどベータにプロジェクトを開始した。あなたがそれが好きであることを見て非常に興奮しています。 – tjscience

関連する問題