如何在 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>
我希望能够在此 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>