We Keep Coding

Document does not display only on the first page

I am experiencing this weird scenario that I am unable to figure out what the problem is. There is a pagination for a collection which works fine when navigating. I have 5 documents in a collection with each to display per 2 on a page sing the pagination. Each document has a url link that when clicked it displays the full page for the document.
The challenge now is that if I click a document on the first page, it displays the full record, but if I navigate to the next page and click a document, it displays a blank page. I have tried all I could but haven't gotten what is to be made right.
These earlier posts are a build up to this present one: Publish and subscribe to a single object Meteor js, Meteor js custom pagination.
This is the helper
singleSchool: function () {
if (Meteor.userId()) {
let myslug = FlowRouter.getParam('myslug');
var subValues = Meteor.subscribe('SingleSchool', myslug );
if (myslug ) {
let Schools = SchoolDb.findOne({slug: myslug});
if (Schools && subValues.ready()) {
return Schools;
}
}
}
},
This is the blaze template
<template name="view">
{{#if currentUser}}
{{#if Template.subscriptionsReady }}
{{#with singleSchool}}
{{singleSchool._id}}
{{singleSchool.addschoolname}}
{{/with}}
{{/if}}
{{/if}}
</template>

try this;
onCreated function:
Template.view.onCreated(function(){
this.dynamicSlug = new ReactiveVar("");
this.autorun(()=>{
// When `myslug` changes, subscription will change dynamically.
this.dynamicSlug.set(FlowRouter.getParam('myslug'));
Meteor.subcribe('SingleSchool', this.dynamicSlug.get());
});
});
Helper
Template.view.helpers({
singleSchool(){
if (Meteor.userId()) {
let school = SchoolDb.findOne({slug: Template.instance().dynamicSlug.get()});
if (school) {
return school;
}
}
}
});

Vue.js "track-by $index", how to render list items individually

Until recently I was using v-show to display each element in an array, one at a time, in my Vue instance. My html had the following line: <li v-for="tweet in tweets" v-show="showing == $index">{{{ tweet }}}</li>". My root Vue instance was constructed this way (thanks #Jeff!):
new Vue({
el: '#latest-tweets',
data: function(){
return {
tweets: [],
showing: 0
};
},
methods:{
fetch:function(){
var LatestTweets = {
"id": '706642968506146818',
"maxTweets": 5,
"showTime": false,
"enableLinks": true,
"customCallback":this.setTweets,
"showInteraction": false,
"showUser": false
};
twitterFetcher.fetch(LatestTweets);
},
setTweets: function(tweets){
this.tweets = tweets;
console.log(tweets);
},
rotate: function(){
if(this.showing == this.tweets.length - 1){
this.showing = -1;
}
this.showing += .5;
setTimeout(function(){
this.showing += .5;
}.bind(this), 1000);
}
},
ready:function() {
this.fetch();
setInterval(this.rotate, 10000);
}
It was all good until I came accross duplicate values. In order to handle these, I replaced v-show with track-by $index, as specified here. I now have this on my html: <li v-for="tweet in tweets" track-by="$index">{{{ tweet }}}</li>. The problem is that, instead of rendering each list item individually, the whole list is rendered at once.
As to the above rotate method, since I cannot do track-by="showing == $index", it is now useless. As far as I understand, this is due to Vue not being able to detect changes in the length of the Array. There seems to be a workaround, as detailed here, which is to "replace items with an empty array instead", which I did at no avail. I cannot figure out what am I missing.
Here're a couple of JsFiddles, with v-show and track-by $index.

The solution was after all rather simple and the resulting code leaner. Doing away with the v-for and track-by $index directives altogether and using a computed property instead did the trick:
computed: {
currentTweet: function () {
return this.tweets[this.showing]
}
}
On the html file, it is just a question of adding the computed property currentTweet as you normally would, with a mustache tag, here interpreted as raw html:
<li>{{{ currentTweet }}}<li>
No need therefore for anything like this:
<li v-for="tweet in tweets" track-by="$index">{{{ tweet }}}</li>
JsFiddle here

Template helper gets called multiple times

My intention is to retrieve one random entry from a collection and display it on the website - if all sentences are through (read: the user has "seen" them), display something else (therefore a dummy sentence gets returned). But, on server start and on button-click events, this helper gets fired at least twice. Here is some code:
In client.js:
Template.registerHelper('random_sentence', function() {
fetched = _.shuffle(Sentences.find({
users: {
$nin: [this.userId]
}
}).fetch())[0];
if (fetched === undefined) {
return {
sentence: "done",
_id: 0,
done: true
};
}
Session.set('question', fetched._id);
console.log(fetched);
return fetched;
});
The helper function for the template:
sent: function(){
sent = Session.get('question');
return Sentences.findOne(sent);
}
in main template:
{{#with random_sentence}}
{{#if done}}
<!-- Display something else -->
{{else}}
<div class="container">
{{> question}}
</div>
{{/if}}
{{/with}}
the "question" template:
<div class="well">
<div class="panel-body text-center">
<h3>{{sent.sentence}}</h3>
</div>
</div>
If I don't return anything in the "random_sentences"-function,nothing get's displayed.
I don't know where my "logic failure" is situated? I'm new to meteor - so I might overlook something obvious.
Thanks in advance :-)
UPDATE: This is how I intended to get the new sentence and display it:
Template.answer.events({
'click': function(event) {
var text = event.target.getAttribute('id');
if (text !== null) {
var question = Session.get('question');
var setModifier = {
$inc: {}
};
setModifier.$inc[text] = 1;
Sentences.update(question, setModifier);
Meteor.call('update_user', question);
Notifications.success('Danke!', 'Deine Beurteilung wurde gespeichert.');
Blaze.render(Template.question, document.head);
}
}
});
In server.js (updating the question and a counter on the user):
Meteor.methods({
update_user: function(question) {
Sentences.update(question, {
$push: {
"users": this.userId
}
});
Meteor.users.update({
_id: this.userId
}, {
$inc: {
"profile.counter": 1
}
});
},
});
I found the Blaze.render function somewhere on the web. the "document.head" part is simply because this function needs a DOM Element to render to, and since document.body just "multiplies" the body, I ust moved it to the head. (DOM logic isn't my strong part).
An Idea I had: would it make the whole idea simpler to implement with iron-router? atm. I wanted to create a "one-page app" - I therefore thought that I don't need a router there.
Another problem: Getting this logic to work (User gets one random sentence, which he has not seen) and publishing small sets of the collection (so the Client don't have to download 5 MB of data before using).

Template helpers can be called multiple times so it's good to avoid making them stateful. You're better off selecting the random entry in an onCreated or onRendered template handler. There you can do your random select, update the state, and put your choice in a Session variable to be retrieved by the helper.

Prevent reactivity from removing data from template

I've got a template to manage important property in my collection. It's a simple list filtered by this property with a toggle that allows changing its value:
<template name="list">
{{#each items}}
<div class="box" data-id="{{_id}}">
{{name}}
<span class="toggle">Toggle</span>
</div>
{{/each}}
</template>
Template.list.items = function() {
return Items.find({property: true}, {sort: {name: 1}});
};
Template.list.events({
'click .toggle': function(e) {
var item = Items.findOne( $(e.target).closest('.box').data('id') );
Items.update(item._id, {$set: {
property: !item.property;
}});
},
});
Quite simple. Now, obviously, when I click the toggle for an item, this item property turns to false and it's removed from the list. However, to enable easy undo, I'd like the item to stay in the list. Ideally, until user leaves the page, but a postponed fadeout is acceptable.
I don't want to block the reactivity completely, new items should appear on the list, and in case of name change it should be updated. All I want is for the removed items to stay for a while.
Is there an easy way to achieve this?

I would store the removed items in a new array, and do something like this:
var removed = []; // Contains removed items.
Template.list.created = function() {
// Make it empty in the beginning (if the template is used many times sequentially).
removed = []
};
Template.list.items = function() {
// Get items from the collection.
var items = Items.find({property: true}).fetch();
// Add the removed items to it.
items = items.concat(removed)
// Do the sorting.
items.sort(function(a, b){ return a.name < b.name}) // May be wrong sorter, but any way.
return items
};
Template.list.events({
'click .toggle': function(e) {
var item = Items.findOne( $(e.target).closest('.box').data('id') );
Items.update(item._id, {$set: {
property: !item.property;
}});
// Save the removed item in the removed list.
item.property = !item.property
item.deleted = true // To distinguish them from the none deleted ones.
removed.push(item)
},
});
That should work for you, wouldn't it? But there may be a better solution.

Meteor: Hide or remove element? What is the best way

I am quite new with Meteor but have really been enjoying it and this is my first reactive app that I am building.
I would like to know a way that I can remove the .main element when the user clicks or maybe a better way would be to remove the existing template (with main content) and then replace with another meteor template? Something like this would be simple and straightforward in html/js app (user clicks-> remove el from dom) but here it is not all that clear.
I am just looking to learn and for some insight on best practice.
//gallery.html
<template name="gallery">
<div class="main">First run info.... Only on first visit should user see this info.</div>
<div id="gallery">
<img src="{{selectedPhoto.url}}">
</div>
</template>
//gallery.js
firstRun = true;
Template.gallery.events({
'click .main' : function(){
$(".main").fadeOut();
firstRun = false;
}
})
if (Meteor.isClient) {
function showSelectedPhoto(photo){
var container = $('#gallery');
container.fadeOut(1000, function(){
Session.set('selectedPhoto', photo);
Template.gallery.rendered = function(){
var $gallery = $(this.lastNode);
if(!firstRun){
$(".main").css({display:"none"});
console.log("not");
}
setTimeout(function(){
$gallery.fadeIn(1000);
}, 1000)
}
});
}
Deps.autorun(function(){
selectedPhoto = Photos.findOne({active : true});
showSelectedPhoto(selectedPhoto);
});
Meteor.setInterval(function(){
selectedPhoto = Session.get('selectedPhoto');
//some selections happen here for getting photos.
Photos.update({_id: selectedPhoto._id}, { $set: { active: false } });
Photos.update({_id: newPhoto._id}, { $set: { active: true } });
}, 10000 );
}

If you want to hide or show an element conditionaly you should use the reactive behavior of Meteor: Add a condition to your template:
<template name="gallery">
{{#if isFirstRun}}
<div class="main">First run info.... Only on first visit should user see this info.</div>
{{/if}}
<div id="gallery">
<img src="{{selectedPhoto.url}}">
</div>
</template>
then add a helper to your template:
Template.gallery.isFirstRun = function(){
// because the Session variable will most probably be undefined the first time
return !Session.get("hasRun");
}
and change the action on click:
Template.gallery.events({
'click .main' : function(){
$(".main").fadeOut();
Session.set("hasRun", true);
}
})
you still get to fade out the element but then instead of hiding it or removing it and having it come back on the next render you ensure that it will never come back.
the render is triggered by changing the Sessionvariable, which is reactive.

I think using conditional templates is a better approach,
{{#if firstRun }}
<div class="main">First run info.... Only on first visit should user see this info.</div>
{{else}}
gallery ...
{{/if}}
You'll have to make firstRun a session variable, so that it'll trigger DOM updates.

Meteor is reactive. You don't need to write the logic for redrawing the DOM when the data changes. Just write the code that when X button is clicked, Y is removed from the database. That's it; you don't need to trouble yourself with any interface/DOM changes or template removal/redrawing or any of that. Whenever the data that underpins a template changes, Meteor automatically rerenders the template with the updated data. This is Meteor’s core feature.