1

基本的に、純粋なJSアプリ（socket.ioから、またはajaxリクエストを使用してサーバーから情報を取得する）があり、処理後にこのデータを表示する必要がある場合、どの手法を使用していますか？

現在、次のようなコードを使用して要素を手動で作成しています

var myDiv = new Element('div',{ /* options */);

そして、すべてのDOM構造を作成する必要がある場所にそれを注入します。これを維持するのは難しいと思います。特にhtmlをコーディングできるデザイナーにとってはそうですが、JSからhtmlをコーディングすることはできません。

このプロセスを改善する方法はありますか？ajaxからhtmlを取得する方が良いですか？または単に文字列でhtmlコードを作成しますか？

メンテナンスとリソースの面で最適なものを探しています。

4

5 に答える 5

1

あなたが探しているのは「テンプレート」です。

HTMLテンプレート（一部のdivなど）があり、これをJSで提供するデータとバインドします。次に、使用しているテンプレートエンジンを使用して、完全なHTMLを取得できます。

ここにいくつかのテンプレートエンジンがあります：

そして、プレートを使用したコードサンプル：

var Plates = require('plates'); // specific to node.js, see for client-side use

var html = '<div id="test">Old Value</div>';
var data = { "test": "New Value" };

var output = Plates.bind(html, data); 
console.log( output ); // '<div id="test">New Value</div>'

テンプレートは、ajaxを介してロードされた単一のファイル（ "templates.html"）に保存するか、HTMLページに保存することで保存できます（メンテナンスの問題にはあまりお勧めしません）。

それらをすべて外部ファイルに保存すると、次のようになります。

templates.html：

<!-- text/html isn't parsed by the browser so we can put anything in it -->
<script type="text/html" id="template1"> 
    <!-- put your template in there
</script>

そして、あなたはその内容をgetElementById( 'template1' )。

于 2012-08-18T00:35:19.063 に答える
1

プロジェクトが後期段階にある場合、jQuery.templateプラグインのようなものを追加し、別のファイルにテンプレートを作成するための最も簡単な方法。次に、バックエンドを使用してこれらのピースを1つのページに結合し、DOMReadyでクライアント側のアプリを起動します。

プロジェクトが初期段階にある場合は、AngularJsまたはBackboneJSフレームワークを使用してください。私を信じてそれはすべてのセントの価値があります:)

于 2012-08-18T00:35:45.700 に答える
0

Backbone.jsをご覧になることをお勧めします。

Backbone.jsは、キー値バインディングとカスタムイベントを備えたモデル、列挙可能な関数の豊富なAPIを備えたコレクション、宣言型イベント処理を備えたビューを提供することでWebアプリケーションに構造を提供し、RESTfulJSONインターフェイスを介してすべてを既存のAPIに接続します

RESTfulインターフェイスを使用していなくても、バックボーンを使用します。構造を動作から分離するのは非常に簡単です...jQueryを使用して同じことを実現できますが、きれいでクリーンなものにはなりません。これはMV*フレームワークの1つです。あなたが持っている：

  1. インタラクティブデータとそれを取り巻くロジックの大部分（変換、検証、計算されたプロパティ、アクセス制御）を含むモデル。
  2. コレクションは、注文されたモデルのセットです。
  3. ビュー：一般的な考え方は、モデルに裏打ちされた論理ビューにインターフェースを編成することです。各ビューは、ページを再描画することなく、モデルが変更されたときに個別に更新できます。
  4. ルーターは、クライアント側のページをルーティングし、それらをアクションやイベントに接続するためのメソッドを提供します

最近注目されています。バックボーンを使用して作成されたアプリは次のとおりです。

  1. FourSquare
  2. LinkedIn for Mobile

これは、Backboneを使い始めている場合に最適なリソースです。

于 2012-08-18T00:30:37.983 に答える
0

遠位テンプレートhttp://code.google.com/p/distal/：

 <table id="a"> 
   <tr><th>OPINIONS</th></tr> 
   <tr data-qrepeat="m keywords"><td data-qtext="m.name"></td></tr> 
 </table>

次に、電話します。

distal(document.getElementById("a"), {
  keywords: [
    {name:"Brilliant"}, {name:"Masterpiece"}, {name:"Witty"}
  ]
});

となります：

 <table> 
   <tr><th>OPINIONS</th></tr> 
   <tr><td>Brilliant</td></tr> 
   <tr><td>Masterpiece</td></tr> 
   <tr><td>Witty</td></tr> 
 </table>
于 2012-09-03T09:49:33.327 に答える
0

そして、すべてのDOM構造を作成する必要がある場所にそれを注入します。これを維持するのは難しいと思います。特にhtmlをコーディングできるデザイナーにとってはそうですが、JSからhtmlをコーディングすることはできません。

別のオプションは控えめです。ドキュメントからわかるように、JavaScriptでのHTMLチャンクの必要性がなくなります。デザイナーはjavascriptを見なくてもHTML構造を変更でき、javascriptコーダーはデザイナーが定義したパラメーターを使用してデータを入力できます（すべてjavascriptで）。

この例は、Readmeからのものです。

HTML：

<div>
  <contact>
    <name>Casey Jones</name>
    <phone>123-456-7890</phone>
  </contact>
</div>

Javascript：

var contact = {
  name : "Casey Jones",
  cell : "123-456-7890"
};
var out = modest.render('contact',contact);
于 2012-09-03T16:31:59.013 に答える