Question

我有以下文档，我需要使用把手将值传递到模板中。我设法显示除reps和kilos之外的所有值，而我似乎无法访问这些值。我怎样才能编写模板代码来达到这些值？我想成对打印出来，reps[0]与kilos[0]等等。

{
  "personId": "Mario",
  "date": "7-10-2014",
  "workout": {
    "exercise": "Military Press",
    "musclegroup": "Shoulders",
    "sets": [
      {
        "reps": [
          "20",
          "30"
        ],
        "kilos": [
          "22",
          "33"
        ]
      }
    ]
  }
}

到目前为止，这是我的模板。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset = "utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

  <!-- CSS Stylesheets -->
  <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="./../../static/styles/main.css">


  <!-- Adding google fonts -->
  <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300|Satisfy' rel='stylesheet' type='text/css'>

  <!-- Scripts -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>

<body>
    <!-- Title & logo -->
    <div id="header">
      <h1><i class="fa fa-book"></i> loGym</h1>
    </div>

    <!-- Main body of page -->
    <main role=”main”>

        <div id="content">
            <h2><strong>Workout</strong></h2>

            {{#if content}}
              {{#content}}
                <p><strong>Date</strong> - {{date}}</p>
                <p><strong>Muscle Group</strong> - {{workout.musclegroup}}</p>
                <p><strong>Exercise</strong> - {{workout.exercise}}</p>
                <p><strong>Sets</strong></p>
                    <ul id="setList">
                      {{#sets}}

                      <li>Reps: {{reps}} - KG: {{kilos}}</li>
                      {{/sets}}
                    </ul>
                {{/content}}
            {{else}}
                <p>There are not documents avalable.</p>
            {{/if}}
        </div>

        <form>
          <input type="button" id="homeButton" class="buttons" value="Home Page" onclick="window.location.href='/'">
        </form>

    </main>

</body>
</html>

Answer 1

您需要使用{{#each}}和{{this}}语句。不是100％肯定你想要的格式，但这是一个简单的例子。

{{#if content}}
          {{#content}}
            <p><strong>Date</strong> - {{date}}</p>
            <p><strong>Muscle Group</strong> - {{workout.musclegroup}}</p>
            <p><strong>Exercise</strong> - {{workout.exercise}}</p>
            <p><strong>Sets</strong></p>
                <ul id="setList">
                  {{#sets}}

                  <li>Reps: {{#each reps}}{{this}}{{/each}} - KG: {{#each kilos}}{{this}}{{/each}}</li>
                  {{/sets}}
                </ul>
            {{/content}}
        {{else}}
            <p>There are not documents avalable.</p>
        {{/if}}

把手显示数组中的项目列表

1 个答案: