underscoreの入れ込構造

５つの入力項目があり、その値を
追加ボタンを押すと<th>の下に一件ずつ仮登録したいです。
その時にtemplateを使ってやろうと考えているのですが、
下のコードのようにtemplateの中にtemplateを入れ込むことは可能でしょうか

html
1<script type="text/template" id="a">
2 <table id="～" class="～"></table>
3 <table>
4  <thead>
5   <tr>
6    <th>～</th>
7    <th>～</th>
8    <th>～</th>
9    <th>～</th>
10    <th>～</th>
11   </tr>
12 </thead>
13 <script type="text/template" id="b">
14   <tbody>
15    <td class="～" id="～"></td>
16    <td class="～" id="～"></td>
17    <td class="～" id="～"></td>
18    <td class="～" id="～"></td>
19    <td class="～" id="～"></td>
20   <tbody>
21  </script>
22 </table>
23</script>

行動規範の内容に同意します

回答2件

入れ子にはできなかったので、二つに分けて

js上で
var temp = _.template($('#c').html());
function ab(json){
$("#b").html(temp(json));
}

コードは一部、省略してますが
ここで、追加ボタンを押すと追加できるようになりました。

投稿2017/06/03 17:33

退会済みユーザー

総合スコア0

ベストアンサー

HTMLの仕様でscriptの入れ子は記述できないので、ご質問にあるようなコードはHTMLとしてNGだと思います。

やはりテーブル全体と各行のそれぞれを個別のテンプレートとして分ける必要がありそうです。

underscore.jsの勉強がてらどういうふうに書けるのかやってみました。簡単のため質問者さんがやろうとしていることを単純化し、表示すべきモデルデータを与え、underscoreテンプレートを用いてtableを動的に生成するというだけのものを書いてみました。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5  <title>underscore test</title>
6  <script src="node_modules/jquery/dist/jquery.min.js"></script>
7  <script src="node_modules/underscore/underscore-min.js"></script>
8  <script type="text/javascript">
9    function onLoad() {
10      const models = [
11        { gender: 'M', name: '貞夫' },
12        { gender: 'M', name: '四郎' },
13        { gender: 'M', name: '半蔵' },
14      ];
15
16      const fOuter = _.template($('#outer').text());
17      const fInner = _.template($('#inner').text());
18
19      function generateRows(models) {
20        return _.chain(models)
21          .map(fInner)
22          .reduce((a, b) => a + b, "")
23          .value()
24      }
25
26      $('#place_holder').html(fOuter({
27        generateRows: generateRows,
28        models: models
29      }));
30    }
31  </script>
32  <!-- テーブル全体のテンプレート -->
33  <script type="text/template" id="outer">
34    <table>
35      <thead>
36        <tr>
37          <th>gender</th><th>name</th>
38        </tr>
39      </thead>
40      <tbody>
41        <%= generateRows(models) %>
42      </tbody>
43    </table>
44  </script>
45  <!-- テーブルの各行のテンプレート -->
46  <script type="text/template" id="inner">
47    <tr>
48      <td><%= gender %></td>
49      <td><%= name %></td>
50    </tr>
51  </script>
52</head>
53<body onload="onLoad();">
54  <p>Family structure</p>
55  <p id="place_holder"></p>
56</body>
57</html>