Meteor template not working/blank page
Question
I am using Cloud9 and the Meteor package.
I have been given instructions to create a keypad template and to implement it. I have followed all of the instructions however the page goes blank when I call the template like this {{> myKeypad}}
If I do {{myKeypad}} the page does not go blank but the template does not appear.
This is my code:
<body>
<h1>Week 2</h1>
<ul class="nav navbar-nav">
<li><a class="navbar-brand">asdadsada</a></li>
<li><a>Test1</a></li>
<li><a>Test2</a></li>
<li><a>Test3</a></li>
</ul>
<br />
<br />
<br />
<button class="btn btn-default" type="submit">Button
<span class="glyphicon glyphicon glyphicon-ok"></span>
</button>
<div class="container">
<div class="row">
<div id="left-box" class="col-md-4">
adadasdasd
</div>
<div id="right-box" class="col-md-8">
asdasdad
{{myKepad}}
</div>
</div>
</div>
<template name="myKeypad">
<button class="btn {{button1class}}">1</button>
<button class="btn {{button2class}}">2</button>
<button class="btn {{button3class}}">3</button>
<button class="btn {{button4class}}">4</button>
<button class="btn {{button5class}}">5</button>
<button class="btn {{button6class}}">6</button>
<button class="btn {{button7class}}">7</button>
<button class="btn {{button8class}}">8</button>
<button class="btn {{button9class}}">9</button>
</template>
</body>
And this is in the meteor.js
if (Meteor.isClient) {
// counter starts at 0
Session.setDefault('counter', 0);
Template.hello.helpers({
counter: function () {
return Session.get('counter');
}
});
Template.hello.events({
'click button': function () {
// increment the counter when button is clicked
Session.set('counter', Session.get('counter') + 1);
}
});
Session.set("button1class", "btn-default");
Session.set("button2class", "btn-default");
Session.set("button3class", "btn-default");
Session.set("button4class", "btn-default");
Session.set("button5class", "btn-default");
Session.set("button6class", "btn-default");
Session.set("button7class", "btn-default");
Session.set("button8class", "btn-default");
Session.set("button9class", "btn-default");
Template.myKeypad.helpers( {
"button1class" : function () { return Session.get("button1class")},
"button2class" : function () { return Session.get("button2class")},
"button3class" : function () { return Session.get("button3class")},
"button4class" : function () { return Session.get("button4class")},
"button5class" : function () { return Session.get("button5class")},
"button6class" : function () { return Session.get("button6class")},
"button7class" : function () { return Session.get("button7class")},
"button8class" : function () { return Session.get("button8class")},
"button9class" : function () { return Session.get("button9class")},
});
}
I have no idea why the template is not showing/breaking the site and making it blank.
1 answers
solution1
0 2015-08-25 08:02:09
<body> is considered a template . Therefore you are defining a template from inside another template's definition. It is not permitted!
<template name="something">
<template name="someotherthing">
{{!-- INCORRECT --}}
</template>
</template>
What you want to do is define your myKeypad template outside of your <body> :
<body>
<h1>Week 2</h1>
<!-- ... -->
{{> myKepad}}
<!-- ... -->
</body>
<template name="myKeypad">
<button class="btn {{button1class}}">1</button>
<button class="btn {{button2class}}">2</button>
<button class="btn {{button3class}}">3</button>
<button class="btn {{button4class}}">4</button>
<button class="btn {{button5class}}">5</button>
<button class="btn {{button6class}}">6</button>
<button class="btn {{button7class}}">7</button>
<button class="btn {{button8class}}">8</button>
<button class="btn {{button9class}}">9</button>
</template>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.