7

更新/作成/削除フラグを使用して websocket から JSON オブジェクトを受け取ります。この情報に基づいて、HTML 要素を更新、作成、または削除し、コールバックをバインドします。これは、複数の HTML 要素に影響を与える可能性があります。

私の現在のアプローチは、jquery を介して HTML 生成を処理する特定のオブジェクトにすべてを入れることでした。

$.("<table>").addChild($("<tr>")).addClass('test')

イベントリスナーをバインドします。しかし、ますます多くのコードが追加されると、それは本当に面倒になり、コードを分離する適切な方法を探しています。

これを適切に行う方法についてのアイデアはありますか? フレームワーク？たぶんjQueryテンプレート（コールバックをきれいに追加する方法についてまだ私を暗闇に残しています）？

4

5 に答える 5

4

MVVMフレームワークを検索します。JavaScriptがますます複雑になっているので、これはまさにあなたが必要としているものです。プレゼンテーションコード（html）とプレゼンテーションロジック（JavaSript）の間で懸念のニーズを分離します

Knockout.jsは、開始するのに非常に優れたライブラリです。チュートリアルを実行して開始することをお勧めします。

簡単な例：

HelloWorld.html

<div data-bind="value: helloWorldVariable"></div>
<input type="button" data-bind="click: helloWorld" />

page.js：

var ViewModel = {
   helloWorldVariable: ko.observable('test'),
   helloWorld: function() {
       this.helloWorldVariable('clicked!');
   }
}

// Bind viewmodel

ボタンがクリックされると、divは自動的に「クリックされた」と表示します。これは、明らかに、AJAXリクエストを介してサーバーから情報を取得するときに使用でき、コントロールID/CSSクラスに依存する必要はありません。それらはいつでも変更される可能性があり、コードは引き続き関連性があります。

于 2012-09-27T15:29:04.923 に答える
0

あなたの場合、 Knockoutjs、AngularJS、Backbone.jsをご覧になることをお勧めします。

于 2012-09-27T15:29:16.983 に答える
0

Backbone.jsをチェックしてください。これは、JSブラウザーアプリ用に非常に人気があり柔軟なMVC風のセットアップです。コードはgithubでホストされています。

于 2012-09-27T15:29:24.373 に答える
0

Knockout JSは一見の価値があるかもしれません。データモデルをビューモデルから分離し、それらの間の依存関係を処理します。

于 2012-09-27T15:29:31.517 に答える
0

HTMLをレンダリングするには、 Handlerbars.jsを使用できます。これは非常に成熟しており、多くのドキュメントがあります。

イベントバインディングについては、ajaxアップデートで削除されていない親オブジェクトでjQueryデリゲートを使用することをお勧めします。このように、すべてのリクエストでイベントを再割り当てするだけで済みます

于 2012-09-27T15:26:23.803 に答える