如何在 Meteor js 中显示 json 的每一项?

how to display each item of a json in Meteor js?

我希望能够在此 json 上使用每个助手,但我无法显示子数组。我已经尝试了一切,但没有任何效果。我是新手,但卡在这部分真是令人沮丧

html

<head>
  <title>tally</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>

  {{> hello}}

    {{#each artist }}
        <h2>{{ name }}</h2>
        <h3>{{ proDate }}</h3>

    <b>Songs</b>: {{#each video}}
                    {{songs}}

                    {{/each}}



    {{/each}}


</body>

javascript

    if (Meteor.isClient) {
    Template.body.helpers({
        artist: [
            {
                "name": "El Alfa",
                "proDate": 2008,
                "albums": 0,
                video: [{
                    "song": "Muevete Jevi",
                    "youtube": "https://www.youtube.com/embed/bnlW-42_Sfs"

                }]
            }]
    });
}

对于您定义的 JSON 结构,它应该如下所示:

{{#each artist }}
    <h2>{{name}}</h2>
    <h3>{{proDate}}</h3>

    <b>Songs</b>: 
    {{#each video}}
        <p>
            Song: {{song}}
            Link: {{youtube}}
        </p>
    {{/each}}

{{/each}}

流星助手与模板相关联。在你的问题中 html 中没有模板。所以,我对此有点困惑。可以参考meteor官方documentation。我也是流星技术的新手。到目前为止,我以两种方式使用助手:

为了更好地理解:

html

<template name="myTemplate">
    {{#each artist}}
        <h3>Name : {{name}}</h3>
        <h4>proDate{{proDate}}</h4>
        <h4>{{albums}}</h4>
        Songs:
        <ul>
            {{#each video}}
                <li>{{song}} - {{youtube}}</li>
            {{/each}}
        </ul>
        <hr>
    {{/each}}
</template>

js(特定模板的heplers)

Template.myTemplate.helpers({
    artist : function(){
        return [
        {
            "name": "El Alfa 1",
            "proDate": 2007,
            "albums": 0,
            video: [{
                    "song": "Muevete Jevi 11",
                    "youtube": "https://www.youtube.com/embed/bnlW-42_Sfs/11"
                },
                {
                    "song": "Muevete Jevi 12",
                    "youtube": "https://www.youtube.com/embed/bnlW-42_Sfs/12"

                }
            ]
        },
        {
            "name": "El Alfa 2",
            "proDate": 2008,
            "albums": 1,
            video: [{
                "song": "Muevete Jevi 21",
                "youtube": "https://www.youtube.com/embed/bnlW-42_Sfs/21"

            },
            {
                 "song": "Muevete Jevi 22",
                 "youtube": "https://www.youtube.com/embed/bnlW-42_Sfs/22"

            }]
        }]
     }
});

OR 我们可以为所有模板编写帮助程序。即

Template.registerHelper("artist", function () {
    return [...] // same JSON as above
});

如有任何疑问,请随时在评论中提出。

干杯。 :)

你直接调用歌曲,Blaze 不知道如何处理它。以下是如何调用示例中引用的歌曲:

{{#each artist}}
  <h2>{{name}}</h2>
  <h3>{{proDate}}</h3>

  <b>Songs</b>: 
  {{#each video}}
    <p>{{song}}</p>
    <p>{{youtube}}</p>
  {{/each}}
{{/each}}

如果你想使用一个助手,它看起来像它。您需要使用 > 符号来引用它。

{{> song}}

官方有一个非常棒的简明示例Meteor page

if (Meteor.isClient) {
  // This code only runs on the client
  Template.body.helpers({
    tasks: [
      { text: "This is task 1" },
      { text: "This is task 2" },
      { text: "This is task 3" }
    ]
  });
}

<body>
  <div class="container">
    <header>
      <h1>Todo List</h1>
    </header>

    <ul>
      {{#each tasks}}
        {{> task}}
      {{/each}}
    </ul>
  </div>
</body>

<template name="task">
  <li>{{text}}</li>
</template>