JavaScript テンプレートの概要_JavaScript スキル

たとえば、ajax を使用してリストに li を挿入したい場合、データと html タグを直接結合して完全な html 文にし、それを ul に挿入します。データがサーバーから取得されるか、ユーザー入力から取得されるかは、どちらの場合でも同じです。
このスプライシング プロセスは、JavaScript ファイルに配置すると非常に洗練されません。 JavaScript にスタイルも追加すると、データ、構造、スタイルがすべて 1 つのポットにまとめられてしまい、人々は自殺したくなるでしょう。最もひどいのは、ページ上に生成されるすべての HTML をサーバー側に直接配置することです。このようなページには、スケーラビリティがほとんどありません。スタイルを使用するにはバックエンド コードの変更が必要です。

後で、JavaScript で DOM のスタイルをカスタマイズする代わりに、CSS ファイルで対応するクラスを定義し、このクラスを JavaScript で使用するだけでよいことがわかりました。

次にしなければならないことは、JavaScript テンプレートを使用して HTML 構造 (この場合は

タグ) を JavaScript からも分離することです。

市場には多くの JavaScript テンプレートがあります。例として、優れたテンプレート ハンドルバー を取り上げます。

ページの HTML でテンプレートを定義します。

コードをコピー コードは次のとおりです:

配置できるコード データはこのテンプレートに結合されます:

コードをコピー コードは次のとおりです:

var source = $("#list-template").html(); //通常、テンプレートのソースは HTML スクリプト内に配置されますが、ここでは jQuery を使用するか、他のメソッドを使用してコンテンツを直接取得することもできます。 string
var template = Handlerbars.compile (source); // テンプレートをコンパイルして生成します
var context = {title:"This is a todo item"} // データを取得します。データは通常、次から取得されます。 ajax または input
var html = template(context ); //Data template = new html

これは基本的な使用法であり、詳細なロジックについては、公式ドキュメントを参照してください。 http://handlebarsjs.com/