Meteor: render template inside a template on click
Question
I have a Meteor app that has a template loaded. Inside that template I have a button. When the button is clicked, I want the app to render or switch to another template which also happens to be a modal.
I can't figure out how to render another template from the click event function.
Any ideas? Here is my code below.
search.html
<template name='search'>
<button class='btn btn-primary' id='showModalButton'>Show Modal</button>
</template>
<template name='searchCustomer'>
<!-- set up the modal to start hidden and fade in and out -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
</div>
<!-- dialog body -->
<div class="modal-body">
My modal body
<div class="modal-footer"><button type="button" class="btn btn-primary">OK</button></div>
</div>
</div>
</div>
</template>
search.js
Template.search.onRendered(function() {
'click #showModalButton': {
// WHAT DO I DO HERE TO RENDER OR CALL THE
// SEARCHCUSTOMER TEMPLATE WITH THE MODAL?
}
});
Template.searchCustomer.onRendered(function() {
$("#myModal").on("show", function() {
$("#myModal a.btn").on("click", function(e) {
$("#myModal").modal('hide');
});
});
$("#myModal").on("hide", function() {
$("#myModal a.btn").off("click");
});
$("#myModal").on("hidden", function() {
$("#myModal").remove();
});
$("#myModal").modal({
"backdrop" : "static",
"keyboard" : true,
"show" : true // show the modal immediately
});
});
1 answers
solution1
3 2015-04-11 02:29:55
I haven't tried this, but I believe you can use a template helper and a Session variable to accomplish this.
<body>
{{> search }}
{{#if showModal }}
{{> searchCustomer }}
{{/if}}
</body>
and then in your js file...
Template.search.helpers({
'showModal': function(){
return Session.get('showModal');
}
'click #showModalButton': function(){
Session.set('showModal', true);
}
);
The searchCustomer template will only render when the 'showModal' Session variable is true.
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.