Example
This follwing is a pure-Blaze approach to toggling UI elements into and outof existence. Think of this as a replacement for modal dialogs. In fact, there are a number of ways to implement modal dialogs using this method (simply add background masks and animations).
Document Object Model
<template name="topicsPage">
<div id="topicsPage" class="container">
<div class="panel">
<div class="panel-heading">
Nifty Panel
</div>
<!-- .... -->
<div class="panel-footer">
<!-- step 1. we click on the button object -->
<div id="createTopicButton" class="btn {{ getPreferredButtonTheme }}">Create Topic</div>
</div>
</div>
<!-- step 5 - the handlebars gets activated by the javascript controller -->
<!-- and toggle the creation of new objects in our model -->
{{#if creatingNewTopic }}
<div>
<label for="topicTextInput"></label>
<input id="topicTextInput" value="enter some text..."></input>
<button class="btn btn-warning">Cancel</button>
<button class="btn btn-success">OK</button>
</div>
{{/if}}
</div>
</template>
Javascript
// step 2 - the button object triggers an event in the controller
// which toggles our reactive session variable
Template.topicsPage.events({
'click #createTopicButton':function(){
if(Session.get('is_creating_new topic'){
Session.set('is_creating_new_topic', false);
}else{
Session.set('is_creating_new_topic', true);
}
}
});
// step 0 - the reactive session variable is set false
Session.setDefault('is_creating_new_topic', false);
// step 4 - the reactive session variable invalidates
// causing the creatNewTopic function to be rerun
Template.topicsPage.creatingNewTopic = function(){
if(Session.get('is_creating_new_topic')){
return true;
}else{
return false;
}
}
