外部urlからjsonデータを取得し、ハンドルバーテンプレートを使用してオブジェクトのリストをコンパイルし、それをブートストラップリストにレンダリングする方法はありますか？

この外部URLからJSONデータをロードしようとしていますhttp://jsonplaceholder.typicode.com/users 外部urlからjsonデータを取得し、ハンドルバーテンプレートを使用してオブジェクトのリストをコンパイルし、それをブートストラップリストにレンダリングする方法はありますか？

私は本当にこれを理解できません。私はHandlebars.jsを試していますが、作成したブートストラップリスト以外のテンプレートには何も表示されません。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.js"></script> 
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 
</head> 

<body> 
<script> 
    $.ajax({ 
    url: 'http://jsonplaceholder.typicode.com/users', 
    dataType:'json' 
    success: function(names){ 
    var source = $('#tpl').html(); 
    var template = Handlebars.compile(source); 
    var context = names; 

    $('#container').html(template(context)); 
    } 
    }); 
    </script> 
<div id="users"></div> 
<script id="tpl" type="text/template"> 
    <ul> 
     {{#each name}} 
      <li>{{this}}</li> 
     {{/each}} 
    </ul> 
    </script> 
<div class="container"> 
    <ul class="list-group"> 
<li class="list-group-item">Leanne Graham</li> 
<li class="list-group-item">Ervin Howell</li> 
<li class="list-group-item">Clementine Bauch</li> 
<li class="list-group-item">Patricia Lebsack</li> 
<li class="list-group-item">Chelsey Dietrich</li> 
<li class="list-group-item">Mrs. Dennis Schulist</li> 
<li class="list-group-item">Kurtis Weissnat</li> 
<li class="list-group-item">Nicholas Runolfsdottir V</li> 
<li class="list-group-item">Glenna Reichert</li> 
<li class="list-group-item">Clementina DuBuque</li> 
    </ul> 
</div> 
</body> 
</html>

任意の助けをいただければ幸いです:(

出典

2017-04-02 amflynn

をあなたのコードにハンドルバーの誤用数があります：

$('#container')が$('.container')
type="text/template"はtype="text/x-handlebars-template"
である必要があります。リターンjsonのデータ構造に基づいて、 {{#each this}}ことが、その後、要約中のSO <li>{{name}}</li>

を表示し、正しいコードは次のようになります。

<script> 
    $.ajax({ 
    url: 'http://jsonplaceholder.typicode.com/users', 
    dataType:'json', 
    success: function(names){ 
     var source = $('#tpl').html(); 
     var template = Handlebars.compile(source); 
     var context = names; 
     $('.container').html(template(context)); 
    } 
    }); 
</script> 

<div id="users"></div> 

<script id="tpl" type="text/x-handlebars-template"> 
    <ul> 
    {{#each this}} 
     <li>{{name}}</li> 
    {{/each}} 
    </ul> 
</script>

出典

2017-04-02 04:35:23 hcheung

外部urlからjsonデータを取得し、ハンドルバーテンプレートを使用してオブジェクトのリストをコンパイルし、それをブートストラップリストにレンダリングする方法はありますか？

答えて

関連する問題