I have this template:
<body>
{{> hello}}
</body>
<template name="hello">
{{greeting}}
</template>
And this is the controller:
if (Meteor.isClient) {
Template.hello.greeting = "Hi";
Meteor.setInterval(function() {
Session.set("greeting", Values.findOne({}).value.toString());
console.log(Values.findOne({}).value);
}, 1000);
}
On the console I'm getting the value in the collection Values. However, when I Session.set it to greeting, the variable isn't updated on the HTML page. The "Hi" I default it to just stays there while every second I get the value that should be in it on the console.
Try doing this:
Template.hello.greeting = function () {
return Session.get('greeting');
});
Related
This is my router:
Router.route('/cource/:courcePath', {
name: 'Cource_page',
template: 'Cource_page',
data() {
return Cources.find({ courcePath: this.params.courcePath });
}
});
Template:
<template name="Cource_page">
<div class="container">
{{#each cources}}
<h1>{{courceTitle}}</h1>
{{/each}}
</div>
</template>
And helper:
Template.Cource_page.helpers({
cources() {
let courcePath = this.courcePath;
console.log(courcePath);
return Cources.find({ courcePath: courcePath });
}
});
When I go to some page (http://localhost:3000/cource/my-new-cource, for example), no data rendering and I get undefined in the console (the output of template helpers). What am I doing wrong?
You need to pass the data in the render directive
Router.route('/post/:_id', function () {
this.render('Post', {
data: function () {
return Posts.findOne({_id: this.params._id});
}
});
});
OR
you should subscribe to the data in the route:
Router.route('/cource/:courcePath', {
name: 'Cource_page',
template: 'Cource_page',
subscriptions: function() {
this.subscribe('courses', this.params.courcePath);
}
});
Check the guide for more info:
http://iron-meteor.github.io/iron-router/
When you provide the data context in your i-r route you don't need the helper. Try:
Router.route('/cource/:courcePath', {
name: 'Cource_page',
template: 'Cource_page',
data() {
return Cources.find({ courcePath: this.params.courcePath });
}
});
<template name="Cource_page">
<div class="container">
{{#each this}}
<h1>{{courceTitle}}</h1>
{{/each}}
</div>
</template>
Here is what I have:
Templates:
<body>
{{> resultSession}}
{{> resultMethod}}
</body>
<template name="resultSession">
<button>Click me</button>
<p>Session.get('length') returned {{returned}}</p>
</template>
<template name="resultMethod">
<p>Meteor.call returned {{returned}}</p>
</template>
Client-side:
Template.resultSession.events({
'click button': function () {
Session.set('length', Math.floor((Math.random() * 20) + 1));
}
});
Template.resultSession.helpers({
returned: function () {
return Session.get('length');
}
});
Template.resultMethod.helpers({
returned: function() {
Meteor.call('returnArray', Session.get('length'), function (err, res) {
return res.length;
});
}
});
Server-side:
Meteor.methods({
'returnArray': function (length) {
var arr = [];
arr[length - 1] = 0;
return arr;
}
});
TL;DR
You can look at code and play with it here http://meteorpad.com/pad/AkBZq4ZFjJuQuzztz/Meteor.call-on-Session-change
As you can see, my method accepts number and returns the array with length equal to number.
The question is how can I make Meteor.call fire each time Session variable changes?
P.S. Values are returned to two different templates on purpose
Your reactive code is working perfectly.
If you put a console.log in the Meteor.call you will see that the correct answer is coming back from the server.
Template.resultMethod.helpers({
returned: function() {
Meteor.call('returnArray', Session.get('length'), function (err, res) {
console.log('it came back ' + res.length);
return res.length;
});
}
});
I have put a Session variable into the return from the server, so now you can see that your reactive code works very simply - no need for complicated autorun stuff.
<template name="resultMethod">
<p>Meteor.call returned {{returned}}</p>
</template>
Then in the resultMethod helper:
Template.resultMethod.helpers({
returned: function() {
Meteor.call('returnArray', Session.get('length'), function (err, res) {
Session.set('fromServer', res.length + '');
});
return Session.get('fromServer');
}
});
Like #saimeunt said, use Tracker.autorun
Templates:
<body>
{{> resultSession}}
{{> resultMethod}}
</body>
<template name="resultSession">
<button>Click me</button>
<p>Session.get('length') returned {{returned}}</p>
</template>
<template name="resultMethod">
<p>Meteor.call returned {{returned}}</p>
</template>
And code:
Template.resultMethod.rendered = function() {
this.autorun(function (){
Meteor.call('returnArray', Session.get('length'), function (err, res) {
Session.set('result', res);
});
});
}
Template.resultSession.helpers({
returned: function () {
return Session.get('length');
}
});
Template.resultMethod.helpers({
returned: function() {
return Session.get('result');
}
});
Autorun inside rendered stops when the template is not rendered
You could simply refactor your code to call the Meteor method on click event ?
Template.resultSession.events({
'click button': function () {
var length = Math.floor((Math.random() * 20) + 1);
Session.set('length', length);
Meteor.call('returnArray', length, function (err, res) {
Session.set('result', res.length);
});
}
});
Template.resultSession.helpers({
returned: function () {
return Session.get('length');
}
});
Template.resultMethod.helpers({
returned: function() {
return Session.get('result');
}
});
You could also use Tracker.autorun to track modifications of your Session variable and rerun arbitrary code.
Tracker.autorun(function(){
var length = Session.get("length");
console.log("length new value =", length);
});
I am new to meteor and got stucked and can't understand what am I doing wrong. Enlighten me please.
Here is the HTML file:
<body>
<h1>Do</h1>
{{#if activeTask}}
{{> currentTask}}
{{else}}
{{> newTask }}
{{/if}}
<div>
</div>
</body>
<template name="newTask">
<form>
<label>What<input type="text" name="what" placeholder="gimme an action"/></label>
<input type="submit" value="Go"/>
</form>
<!--
{{> inputAutocomplete settings=settings id="msg" class="input-xlarge" placeholder="action"}}
-->
</template>
<template name="currentTask">
<form>
<label>What<input type="text" name="what" placeholder="gimme an action"/>{{activeTask.what}}</label>
<div>4h 15m</div>
<input type="submit" value="Stop"/>
</form>
</template>
And here is the JavaScript file:
tasks = new Mongo.Collection('tasks');
if (Meteor.isClient) {
Template.body.helpers({
activeTask: function() {
var task = tasks.findOne(
{
endAt: null
},
{
sort: {
startAt: -1
}
}
);
console.log(task);
return task;
}
});
Template.newTask.events({
'submit' : function(event) {
event.preventDefault();
var now = Date.now();
var what = event.target.what.value;
tasks.insert({ what: what, startAt: now, endAt: null });
}
});
}
It successfully adds a new document into the database and logs this in the helper activeTask. One step later it logs no task at all. It has gone. But why?
If you don't have the package autopublish (https://atmospherejs.com/meteor/autopublish) installed, you need to create a publication (client-side) and subscription (server-side):
if (Meteor.isServer) {
Meteor.publish('tasks', function () {
return tasks.find();
});
}
if (Meteor.isClient) {
Meteor.subscribe('tasks');
}
I've also explained working with collections in a recent blog article.
How can I make Iron:router re-render a template?
I have this html:
<head>
</head>
<body>
</body>
<template name="mainLayout">
list
find
{{> yield}}
</template>
<template name="listTemplate">
<p>list</p>
</template>
and this js:
Router.configure({
layoutTemplate: 'mainLayout'
});
Router.route('/list', {
name: 'list',
template: 'listTemplate'
});
Router.route('/find', {
name: 'find',
template: 'listTemplate',
data: function () {
return this.params.query;
}
});
if (Meteor.isClient) {
Template.listTemplate.rendered = function () {
if (this.data)
console.log('find ' + this.data.q);
else
console.log('list all');
};
}
When I click on the links to switch views (simulated here with console.log), the route does change, but the template is not re-rendered.
Is there a way to force iron:router to re-render?
Setting the router controller state did not work for me. The answer Antônio Augusto Morais gave in this related github issue worked. Using the Session to store the reactive var to trigger the autorun reactiveness. It's a hack, but it works.
## router.coffee
Router.route '/profile/:_id',
name: 'profile'
action: ->
Session.set 'profileId', #params._id
#render 'profile'
## profile.coffee
Template.profile.onCreated ->
#user = new ReactiveVar
template = #
#autorun ->
template.subscription = template.subscribe 'profile', Session.get 'profileId'
if template.subscription.ready()
template.user.set Meteor.users.findOne _id: Session.get 'profileId'
else
console.log 'Profile subscription is not ready'
Template.profile.helpers
user: -> Template.instance().user.get()
## profile.html
<template name="profile">
{{#if user}}
{{#with user.profile}}
<span class="first-name">{{firstName}}</span>
<span class="last-name">{{lastName}}</span>
{{/with}}
{{else}}
<span class="warning">User not found.</span>
{{/if}}
</template>
You can try something like this:
Router.configure({
layoutTemplate: 'mainLayout'
});
Router.route('/list', {
name: 'list',
template: 'listTemplate',
action: function() {
this.state.set('query', this.params.query);
}
});
Router.route('/find', {
name: 'find',
template: 'listTemplate',
data: function() {
return this.params.query;
},
action: function() {
this.state.set('query', this.params.query);
}
});
if (Meteor.isClient) {
Template.listTemplate.rendered = function() {
this.autorun(
function() {
if (this.state.get('query'))
console.log('find ' + this.data.q);
else
console.log('list all');
}
);
};
}
The rendered method isn't reactive, that's why you need an autorun.
The template "this.data" isn't reactive so you're gonna need a reactive var to do that, either a Session variable, a controller state, or some kind of reactive var.
You may need to add the reactive-var package depending on what approach you take.
I have following code in the Router (Iron Router)
Router.map( function () {
this.route('hello',{path:'/hello',
onBeforeAction: function(){
console.log("QBConnected"+this.params.qbconnected);
Session.set("QBCONNECTED",this.params.qbconnected);
}
});
});
Following code in test.html
<template name="hello">
{{#if QBCONNECTED}}
<h1>Hello World if value={{QBCONNECTED}}</h1>
{{else}}
<h1>Hello World else value={{QBCONNECTED}}</h1>
{{/if}}
{{greeting}}
<input type="button" value="Click" />
</template>
Following code in test.js
if (Meteor.isClient) {
//Session.setDefault('QBCONNECTED',false);
Template.hello.greeting = function () {
return "Welcome to test.";
};
Template.hello.events({
'click input': function () {
// template data, if any, is available in 'this'
if (typeof console !== 'undefined')
console.log("You pressed the button");
}
});
Template.hello.QBCONNECTED=function(){
console.log(Deps.active+"get QBCONNECTED called"+Session.get('QBCONNECTED'));
return Session.get('QBCONNECTED');
};
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
when I try to run this with the URL http://x.x.x.x:3000/hello?qbconnected=true
I see the string "Hello World if value=true" as expected
But when I try the url http://x.x.x.x:3000/hello?qbconnected=false, I see the string
Hello World if value=false. Can anyone please explain why it is entering the if block when the value of QBCONNECTED is false?
When I try to set the value manually from browser console by "Session.set("QBCONNECTED",true)" it prints "Hello World if value=true" as expected but when I try "Session.set("QBCONNECTED",false)" it prints "Hello World else value= " , can any one explain why QBCONNECTED is loosing it's value when set to false ?
This is happening because false from your querystring gets evaluated to the "false" string and not false boolean value as you might have expected.