如何使用车把处理来自 json 的数据

Question

我有下一个问题，我需要在 html 加载时获取一些信息。该信息来自 api 休息，所以我有一个 ajax 函数和 html。除了将 handlebars 标签放在脚本中然后添加附加的 div 之外，我没有找到其他方法。

是另一种方式吗？

$(document).ready(

  function obtenerProperties(){
   $.ajax({
     url: "http://127.0.0.1:9000/property?type=URL",
     success: function(data){

      var source = $("#properties-template").html();

      var template = Handlebars.compile(source);

     $(".prueba").append(template(data));

     },
      error: function(data) {
      console.log('error', data);
      }
   })
   }

 );

HTML:

     <body>
    <script id="properties-template" type="text/x-handlebars-template">
        <div class="">
            <table class="table">
                <thead class="thead-dark">
                    <tr>
                        <th scope="col">Nombre</th>
                        <th scope="col">Tipo</th>
                        <th scope="col">Cron</th>
                    </tr>
                </thead>
                <tbody>
                        {{#each properties}}
                    <tr>

                        <th scope="row">1</th>
                        <td>{{clave}}</td>
                        <td>{{valor}}</td>
                        {{/each}}
                    </tr>
                </tbody>
            </table>
        </div>
  </script>
  <div class="prueba">
  </div>
</body>

Answer 1

编辑后的答案，我将 $ajax 调用放在 html 正文中的单独脚本选项卡中，并将 pruba class 移至“tbody”。

 `<body>
<script>
$(document).ready(
  function obtenerProperties(){
   $.ajax({
 url: "http://127.0.0.1:9000/property?type=URL",
 success: function(data){
  var source = $("#properties-template").html();
  var template = Handlebars.compile(source);
 $(".prueba").append(template(data));
 },
  error: function(data) {
  console.log('error', data);
  }
 })
});
</script>
<script id="properties-template" type="text/x-handlebars-template"/>
    <div class="">
        <table class="table">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">Nombre</th>
                    <th scope="col">Tipo</th>
                    <th scope="col">Cron</th>
                </tr>
            </thead>
            <tbody class="prueba">
                    {{#each properties}}                   
                    {{data}}                      
                    {{/each}}                  
            </tbody>
        </table>
    </div>
</body>`

如何使用车把处理来自 json 的数据

How to handle data from json with handlebars

javascript

handlebars.js