Handlebars - 传递数据

Question

我正在尝试 center table while each helper 中的 td 之一。可以这样做吗？

下面是我的代码：

<table>
  <thead>
    <tr>
    {{#each item.[0]}}
        <th>{{@key}}</th>
    {{/each}}
    </tr>
  </thead>
  <tbody>
    {{#each item}}
    <tr>
        <td>{{Name}}</td>
        <td>{{Age}}</td>
    </tr>
    {{/each}}
  </tbody>
</table>

我希望它是这样的：

<thead>
    <tr>
        <th>Name</th>
        <th style="text-align:center">Age</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>User 1</td>
        <td style="text-align:center">12</td>
    </tr>
</tbody>

Answer 1

var theTemplateScript = $("#entry-template").html();

var theTemplate = Handlebars.compile(theTemplateScript);


var context = {
  title: "My New Post",
  body: "This is my first post!",
  item: [{
    "Name": "Ayyub",
    "Age": 23
  }]
};


console.log("context ", context)

var theCompiledHtml = theTemplate(context);

console.log("theCompiledHtml ", theCompiledHtml);

$('.content-placeholder').html(theCompiledHtml);
var html = theTemplate(context);

.Age {
  text-align: center;
  color: red;
}

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

<body>

  <script id="entry-template" type="text/x-handlebars-template">
    <table>
      <thead>
        <tr>
          {{#each item.[0]}}
          <th class="{{@key}}">{{@key}}</th>
          {{/each}}
        </tr>
      </thead>
      <tbody>
        {{#each item}}
        <tr>
          <td>{{Name}}</td>
          <td class="Age">{{Age}}</td>
        </tr>
        {{/each}}
      </tbody>
    </table>
  </script>
  <div class="content-placeholder">
    <table>
      <thead>
        <tr>
          {{#each item.[0]}}
          <th class="{{@key}}">{{@key}}</th>
          {{/each}}
        </tr>
      </thead>
      <tbody>
        {{#each item}}
        <tr>
          <td>{{Name}}</td>
          <td class="Age">{{Age}}</td>
        </tr>
        {{/each}}
      </tbody>
    </table>
  </div>
</body>

You can use this snippet, for reference I have added red color for font which you can remove later from the CSS file. Hope this helps :)

Handlebars - 传递数据

Handlebars - Passing data with each

handlebars.js