所以我正在为mdl构建一个定价表,我正在尝试使用模板填充不同的计划选项,并且我在显示计划的功能部分时遇到问题。它看起来像:
这是我想要它的代码:http://codepen.io/sylverfyst/pen/QyVYmK
有人可以让我知道我的Javascript中的大火PlansRowOne和PlansRowTwo对象出了什么问题吗?我认为它可能是嵌套的功能:[],但我不知道它的实际语法是什么。
这是我到目前为止所尝试的内容:
外部HTML
<template name="sell">
<div>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col"><h1>CHOOSE A PLAN TO JOIN TODAY</h1></div>
<div class="mdl-cell mdl-cell--3-col"></div><!-- Spacer -->
{{#each PlansRowOne}}
{{> pricingItem}}
{{/each}}
<div class="mdl-cell mdl-cell--3-col"></div><!-- Spacer -->
{{#each PlansRowTwo}}
{{> pricingItem}}
{{/each}}
<div class="mdl-cell mdl-cell--3-col"></div><!-- Spacer -->
</div>
</div>
</template>
Javascript文件
Template.sell.helpers({
PlansRowOne: [
{title: "Basic 6 Month", Dollars: "$44.", Cents: "95", term: "/6 Months", Features: [{feature: "1 Listing for your Business"}, {feature: "Searchable Listing"}, {feature: "Ads on Listing"}, {feature: "Upload Photos"}, {feature: "Unlimited Categories"}, {feature: "X"}]},
{title: "Basic 3 Month", Dollars: "$64.", Cents: "95", term: "/3 Months", Features: [{feature: "1 Listing for your Business"}, {feature: "Searchable Listing"}, {feature: "Ads on Listing"}, {feature: "Upload Photos"}, {feature: "Unlimited Categories"}, {feature: "X"}]},
{title: "Showcase 6 Month", Dollars: "$64.", Cents: "95", term: "/6 Months", Features: [{feature: "1 Listing for your Business"}, {feature: "Searchable Listing"}, {feature: "Ads on Listing"}, {feature: "Upload Photos"}, {feature: "Unlimited Categories"}, {feature: "1st in Search Listings"}]},
],
PlansRowTwo: [
{title: "Professional Silver", Dollars: "$74.", Cents: "95", term: "/Month", Features: [{feature: "One Time Set Up Fee of $29.95"}, {feature: "10 Searchable Listings"}, {feature: "Ads on Listings"}, {feature: "Upload Photos"}, {feature: "Unlimited Categories"}, {feature: "X"}]},
{title: "Professional Gold", Dollars: "$94.", Cents: "95", term: "/Month", Features: [{feature: "One Time Set Up Fee of $29.95"}, {feature: "10 Searchable Listings"}, {feature: "No Ads on Showcase Listings"}, {feature: "Upload Photos"}, {feature: "Unlimited Categories"}, {feature: "2 Showcase Listings"}]},
{title: "Professional Platinum", Dollars: "$114.", Cents: "95", term: "/Month", Features: [{feature: "One Time Set Up Fee of $29.95"}, {feature: "10 Searchable Listings"}, {feature: "No Ads on Showcase Listings"}, {feature: "Upload Photos"}, {feature: "Unlimited Categories"}, {feature: "5 Showcase Listings"}]},
]
});
内部HTML
<template name="pricingItem">
<div class="pricing-item mdl-cell mdl-cell--2-col mdl-shadow--2dp">
<div class="pricing-title">
{{title}}
</div>
<div class="pricing-value">{{Dollars}}<span class="smallText">{{Cents}}</span>
<span class="undertext">{{term}}</span>
</div>
<ul class="mdl-list list">
{{#each features}}
<li class="mdl-list__item">{{feature}}</li>
{{/each}}
</ul>
<div class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--accent mdl-button--raised button">Subscribe</div>
</div>
</template>
答案 0 :(得分:2)
下面:
{{#each features}}
<li class="mdl-list__item">{{feature}}</li>
{{/each}}
在您的数据中:
Features: [...]
所以这是一个错字。