Question: In a single page app, does Meteor maintain state of Checkbox when user goes from one page to another?
I am trying to develop a 'Select books to read' app in Meteor where on homepage, user can choose from multiple books to add to his reading list. The chosen books show up on the My Reading List page. I have set up routing system with Flow Router.
// routes.js
FlowRouter.route('/', {
name: 'bookList',
action: function() {
BlazeLayout.render("mainLayout", {content: "bookList"});
}
});
FlowRouter.route('/myReadingList', {
name: 'myReadingList',
action: function() {
BlazeLayout.render("mainLayout", {content: "myReadingList"});
}
});
// bookList.js Helpers for bookList template
Template.bookList.helpers({
'books': function() {
return books.find();
}
});
Template.bookList.events({
'change .item': function(event) {
var temp = false;
Session.set("temp", event.target.checked);
if (Session.get("temp")) {
myReadingList.insert({
userid: Meteor.userId(),
bookName: this.bookName
});
} else {
var bookName = this.bookName;
Meteor.call('removebook', bookName); // remove unselected // books from list
}
});
// myReadingList.js Helpers for second page
Template.myReadlingList.helpers({
'selectedBooks':function(){
return selectedBooks.find();
}
)};
<!-- bookList.html : Homepage:bookList Template -->
{{#each books}}
<ul>
<li><input type="checkbox"> {{bookName}}
</ul>
{{/each}}
<!-- myReadingList.html: Second Page:myReadingList Template -->
{{#each selectedBooks}}
<ul>
<li>{{ name }}li>
</ul>
{{/each}}
Problem: Everything works as expected. I am able to choose books on first page. And the selected books show up on the second page. But when I go back to the first page to add more books or review selected books, all the checkboxes are fresh as new.
- Is this normal in Meteor or am I missing something?
- If this is normal, how can I make the checkbox state persist when switching back and forth between page 1 and 2?
Aucun commentaire:
Enregistrer un commentaire