1

JavaScript テンプレートの世界は初めてです。

ここに、テンプレート コードをどのように編成すればよいか分からないページがあります。

これは、ページが最初にロードされたときの関連する HTML です。

...
<table id="color-codes">
  <tr>
    <td>red</td>
    <td>#FF0000</td>
  </tr>
  <tr>
    <td>blue</td>
    <td>#0000FF</td>
  </tr>
  <tr>
    <td>black</td>
    <td>#000000</td>
  </tr>
</table>
...

ユーザーは表に色を追加できます。色が追加されるたびに、ブラウザーは AJAX 要求をサーバーにディスパッチします。サーバーは、色の名前と色コードの両方を持つ JSON オブジェクトを返します。

JSON オブジェクトを受け取ると、クライアント側は JSON オブジェクトを使用してテンプレート (以下) をレンダリングし、結果の DOM オブジェクトをテーブルの最後に挿入します。

テーブル行テンプレート:

<tr id='tp-color-entry'>
  <td class='color-name'></td>
  <td class='color-code'></td>
</tr>

質問: このテンプレート コードはどこに配置すればよいですか? HTMLファイルで？それともJSファイル？HTMLファイルの場合、ページのプレゼンテーション/レイアウトに干渉しないようにするにはどうすればよいですか? JSファイルの場合、変数に割り当てて保存するだけですか?

Pure for JS Templating と Django をサーバー エンドとして使用していることに注意してください。また、私は常に HTML コードと JS コードを別々のファイルに保存するようにしています。

4

1 に答える 1

1

script認識されないtype属性を持つタグに入れることができます:

<script type="text/x-pure-template" id="color-entry-template">
    <tr id='tp-color-entry'>
        <td class='color-name'></td>
        <td class='color-code'></td>
    </tr>
</script>

次に、テンプレートを取得するのは簡単です。

document.getElementById('color-entry-template').textContent
于 2012-11-15T06:11:38.477 に答える