I have a postItem template which shows an edit and delete button when it is an own post for the logged in user:
<div class="page-actions">
{{#if ownPost}}
<a class="btn btn-default" href="{{pathFor 'postEdit'}}">edit</a>
<a class="btn btn-danger delete" href="#">delete</a>
{{/if}}
</div>
The ownPost helper looks like this:
Template.postItem.helpers({
ownPost: function() {
return this.userId === Meteor.userId();
}
});
But this.userId returns undefined. I guess it has something to do with the this context, but I'm not entirely sure what is going wrong here?
You'll need to console.log(this) to check its context, and following that should check that you're a) publishing the data that you want (are you using pub/sub with specified fields or still prototyping with autopublish/insecure etc?).
Lastly I'd check whether you're saving the data correctly to the document in your collection, but obviously only the user collection inherently possesses a userid.
Inside of template helpers like this, the this keyword will refer to object that is populating the template.
Related
I'm trying to access a value inside an {{#each in}}-iteration:
{{#each room in channels}}
<form class="enterRoom">
<button type="submit" class="roomJoin">
<b>{{room.name}}</b>
<img src="{{room.roomBanner}}" alt=".">
<input type="hidden" value="{{room.name}}" name="name">
</button>
<div class="inRoom">
{{#each name in room.inRoom}}
{{name}}
{{/each}}
</div>
</form>
{{/each}}
Normally I would use this.name, for example, to get the name of it inside an event to use it further, like so
'submit .enterRoom'(event) {
event.preventDefault();
const isClosed = this.name; // room.name example here
}
But this doesn't work in this scenario. What I tried before was:
room.name
this.room.name
But those give the same error
chat.js:86 Uncaught ReferenceError: room is not defined
at Object.submit .enterRoom (chat.js:86)
at blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:3818
at Function.Template._withTemplateInstanceFunc (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:3769)
at Blaze.View.<anonymous> (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:3817)
at blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:2617
at Object.Blaze._withCurrentView (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:2271)
at Blaze._DOMRange.<anonymous> (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:2616)
at HTMLFormElement.<anonymous> (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:863)
at HTMLDivElement.dispatch (modules.js?hash=8331598f8baf48556a442a64933e9b70b778274a:9685)
at HTMLDivElement.elemData.handle (modules.js?hash=8331598f8baf48556a442a64933e9b70b778274a:9492)
Could someone explain to me how I could do it in this {{each in}}-setting properly?
The error has nothing to do with the each iterations of your template. What you try is to get the form data within the submit event handle. However, there is no context bound to this or room.
In order to get the room value, you need to access the input value.
Blaze offers a fast way of doing so, by using the Template's builtin jQuery (using templateInstance.$), which automatically scopes to the Template root instead of the whole document:
'submit .enterRoom'(event, templateInstance) {
event.preventDefault();
const roomName = templateInstance.$(event.currentTarget).find('input[name="name"]').val();
// ...
}
Im trying to open a single record from my #each loop of items into its own view by clicking a link that says 'see more', which will take me to the single article. I set up my Flow router and its working but i cannot see the data that's supposed to come in.
the template helper for the single article looks like this
Template.collectionSingle.helpers({
articles: function () {
var id = FlowRouter.getParam('_id')
return theCollection.findOne({_id: id});
}
});
}
my route looks like this
FlowRouter.route('/collection/:_id', {
name: 'collection',
action() {
BlazeLayout.render("AppLayout", {main: "collectionSingle"});
}
});
and the template "collectionSingle" looks like this
<template name="collectionSingle">
<h1>{{title}}</h1>
<h1>This is a test</h1>
<img src="{{thumbnail}}" alt="" />
</template>
when i navigate to http://localhost:3000/collection/thePublication-0
all i see is the test message 'This is a test', but i don't see the {{title}} nor the thumbnail.
furthermore, when i change:
return theCollection.findOne({_id: id});
to another one of my collections :
return OtherCollection.findOne({_id: id});
http://localhost:3000/collection/thePublication-0
remains the same.
how can i successfully have a single articles page for each of my articles and have them linked properly with flow router?
You need to actually use your template helper that is returning the data context:
<template name="collectionSingle">
<h1>{{title}}</h1>
<h1>This is a test</h1>
{{#with articles}}
<img src="{{thumbnail}}" alt="" />
{{/with}}
</template>
Since your articles helper returns a single document you use {{#with articles}}. If it returned a cursor or array you would loop over that with {{#each articles}}. The normal convention is to use the singular form for the former, the plural for the latter.
The following calls messages when the page loads but not when a Session value is changed. Here is the template code;
<head>
<title>Your welcome to chat</title>
</head>
<body>
{{> chat}}
</body>
<template name="chat">
<div class="ui list" style='height: 100px; overflow:scroll;' id='chatHistory'>
{{> currentChatList}}
</div>
<div class="ui large icon input">
<input type="text" class="field" id="message" placeholder="Type your message here" />
<i class="comment icon"></i>
</div>
</template>
<template name="currentChatList">
{{#each messages}}
{{/each}}
</template>
Here is the code;
if (Meteor.isClient) {
Template.chat.events ({
'keydown input#message' : function (event) {
if (event.which == 13) { // 13 is the enter key event
Session.set('time', new Date());
}
}
});
Template.currentChatList.helpers({
messages : function () {
debugger;
return [];
}
});
}
debugger statement is hit when the page loads, but not when the enter key is pressed on the textbox and Session.set('time'..) is executed. I thought a Session value change would cause the template to render.
saimeunt's answer will solve you problem. Your helper at the moment doesn't access any reactive variable (Session or Collection), which means it's never executed again.
Recently more and more people prefer to use reactive-var:
The idea is that you declare a reactive variable within your JS file and then USE that reactive variable in your helper. Every time you change the variable, all helpers using this variable are re-executed.
You do not depend on the Session variable you're assigning anywhere on your code. A reactive computation such as template helpers only reruns if one of its dependent reactive data sources is modified, which is clearly not the case in your example.
Try to depend on the Session variable inside your helper code to make it re-execute whenever you press enter.
Template.currentChatList.helpers({
messages: function () {
debugger;
var time = Session.get("time");
console.log("You pressed enter at",time);
return [];
}
});
FINALLY THE ANSWER: OMG.
https://blog.meteor.com/the-meteor-chef-reactive-dict-reactive-vars-and-session-variables-971584515a27
I have tried window.someVariableThatChanges = NOT WORKING
I have tried a Session.someVariableThatChanges = NOT WORKING
REACTIVE VARIABLE -- TOTALLY WORKING.
The difference is that you need to create a Template ON CREATED event, add your variables there. Simply use this variable in your even that changes the value, and your helper reference -- it works like magic and feels soooooo goooooood.
I imagine this has to be an elementary issue however I've been struggling through this for too long. I'm relatively new to Meteor.
I've viewed the documentation for the Meteor.user() (http://docs.meteor.com/#meteor_users) and can see how additional information is added to the user.profile. I.e.,
//JS file
Meteor.users.insert({
username: 'admin',
profile: {
first_name: 'Clark',
last_name: 'Kent'
},
});
How then do I display the profile information in the view template? I can access the user object via the view and web console (Meteor.user()) however I cannot access the object details.
My initial thoughts were that I could load the following in my handlebar templates but they do not work:
// HTML view
{{Meteor.user().username}}
{{Meteor.user().profile.first_name}}
{{Meteor.user().profile.last_name}}
Any help is greatly appreciated.
Your insert is correct.
But to show the information like the first name you have to provide a helper function.
Your html-template:
<template name="user">
<p>{{firstName}}</p>
</template>
Your js-code:
Template.user.helpers({
firstName: function() {
return Meteor.user().profile.first_name;
}
});
You can additionaly wrap the user template with the {{currentUser}} helper to be sure there is a user.
{{#if currentUser}}
{{> user}}
{{/if}}
If you don't want to define a proxy helper for different attributes of objects nested in {{currentUser}}, you can do the following purely in your template:
{{#with currentUser}}
{{#with profile}}
{{first_name}}
{{/with}}
{{/with}}
Updated to reflect comment suggestion.
In your templates, you'll want to use {{currentUser}} instead of {{Meteor.user()}}.
Docs
try this way
{{#with userDetails}}
First name:-{{this.first_name}}
Last name:- {{this.last_name}}
{{/with}}
//jsSide
userDetails(){
return Meteor.user();
}
I'm trying to complete the parties demo
with an "edit party" feature
I understood the create Dialog opens upon setting Session showCreateDialog
{{#if showCreateDialog}}
{{> createDialog}}
{{/if}}
this shows the popin
but I want to set to fields post opening
and I don't see how to act after the opening action ?
You can set manipulate the DOM inside the Template's rendered event. But if you find yourself writing lots of glue code here ($("#someInput").val("someVal")) then watch out because you're likely on the wrong track!
Template.createDialog.rendered = function() {
// you can manipulate the DOM here
}
Remember, you can bind field values to instances, so something like the below will auto-bind your object
<template name="editDialog">
{{#with party}}
<input type="text" id="myPartyName" value="{{name}}" />
...
{{/with}}
</template>
Template.editDialog.party = function() {
return Parties.findOne(Session.get("selectedParty"));
};