35557


# 前提

underscore.jsを用いてhtmlにテンプレートを作成し、動的に  
htmlの内容を変更させたいと考えています。

# 現在の問題

下記ソースコードのように書いたのですが、上手くテンプレートが  
htmlに反映されません。  
何が間違っているのか、お伺いしたいです。

# HTMLソースコード

[code]

    <script type = "text/javascript" src = jsファイルがおいてある場所></script>
    </head>
    <body>
    <div class = "container">
     <div class = "row">
      <div class="container">
      <div class="row">
      <div class="bootcards-list col-sm-6">
      <div class="panel panel-default">
      <div class="list-group">
      <script id = "temp" type = "text/template">
     /*テンプレート*/
     <a class="list-group-item" id = "list_<%- data.name %> "href="#<%- data.name %>" onclick="comp('#<%- data.name %>')">
            <div class="row">
              <div class="col-sm-1">
                <img src="<%- data.img %>">
              </div>
              <div class="col-sm-5">
                <h4 class="list-group-item-heading"><%- data.name %></h4>
                <p class="list-group-item-text"><%- data.text %></p>
              </div>
              <div class="col-sm-6">
                <p class="list-group-item-text"><%- data.text %></p>
                <p class="list-group-item-text"><%- data.text %></p>
              </div>
            </div>
          </a>
          </script>
    ・・・
    </body>
    
[/code]

# JSソースコード

[code]

    $(function(){
      var tmplSrc = $('#temp');
      var source = {
       data:[
      {
      "name":"aaa",
      "text":"ddd",
      "img":"cccc"
     },
     ]
    };
    var complied = _.template(tmplSrc,source);
    $('body').append(complied);
    })
    
[/code]


CC BY-SA 3.0
2017-06-13T13:27:59.133
35545
2017-06-14T05:28:15.957
2020-06-17T08:14:45.997
-1
13593
question
javascript html5 node.js
underscore.jsのテンプレート機能が上手く動作しない


正直言って、ツッコミどころが満載です笑  
とりあえず気付いた点を挙げると・・・

  * dataは配列で渡しているのに、テンプレートはオブジェクト（{}）として扱っている
  * template関数の使い方が間違っている（ **templateが返す関数に** データを渡さなければならない）
  * htmlエレメントの属性の指定にスペースが入っている （ex. script id = "temp" type = "text/template"）
  * コピペしただけでは動かないコードで質問している（誰も回答してくれませんよ）
  * 「どう上手くいかないのか」についての説明がない

とりあえず動くサンプルを作成しましたので、そちらを見ながらどこがおかしいのか確認してみてください。  
<https://codepen.io/itmammoth/pen/XgjXov?editors=1010>

参考： Underscoreのヘルプ(<http://underscorejs.org/#template>)


CC BY-SA 3.0
2017-06-14T05:28:15.957
35557
2017-06-14T05:28:15.957
9608
35545
answer