I have some code similar to the following:
In myapp.html
<template name="problems">
<div class="problems">
{{#each problems}}
{{> problem}}
{{/each}}
</div>
</template
<template name="problem">
<div class="problem">
<div class="problem-text" id={{_id}}>{{text}}</div>
</div>
</template>
In myapp.js
Template.problem.events = {
'click .problem-text' : function () {
var user_id = Session.get('user_id');
// how to get problem_id of clicked item?
Router.gotoProblem(user_id, problem_id);
}
};
In this situation I want to get the id of the that matched .problem-text and was clicked.
I would like to know the "object" that generated the event? How do I do this?
The selected answer for this question will ONLY get the _id , and that too if _id is used in templates.
So better use, event.target, that will give COMPLETE object. So that can be used with jQuery or MooTools.
Template.top_nav.events({
'mousedown, .nav li a': function(evt){
console.log('the class of object that was clicked is ' + $(evt.target).attr("class"));
}
})
Try this:
Template.problem.events = {
'click .problem-text' : function () {
var user_id = Session.get('user_id');
// how to get problem_id of clicked item?
Router.gotoProblem(user_id, this._id);
}
};
You can access the problem object with this reference:
Template.problem.events = {
/**
* Handles problem text click.
* #param {jQuery.Event} event
*/
'click .problem-text' : function (event) {
/*
Here this is a reference to the problem object
and you have jQuery.Event object as the event argument.
*/
console.log(this, arguments);
var user_id = Session.get('user_id');
var problem = this;
// how to get problem_id of clicked item?
Router.gotoProblem(user_id, /** problem_id */problem._id);
}
};
Related
I have two publications.
The first pub implements a search. This search in particular.
/* publications.js */
Meteor.publish('patients.appointments.search', function (search) {
check(search, Match.OneOf(String, null, undefined));
var query = {},
projection = {
limit: 10,
sort: { 'profile.surname': 1 } };
if (search) {
var regex = new RegExp( search, 'i' );
query = {
$or: [
{'profile.first_name': regex},
{'profile.middle_name': regex},
{'profile.surname': regex}
]
};
projection.limit = 20;
}
return Patients.find(query, projection);
});
The second one basically returns some fields
/* publications.js */
Meteor.publish('patients.appointments', function () {
return Patients.find({}, {fields: {'profile.first_name': 1,
'profile.middle_name': 1,
'profile.surname': 1});
});
I've subscribed to each publication like so:
/* appointments.js */
Template.appointmentNewPatientSearch.onCreated(function () {
var template = Template.instance();
template.searchQuery = new ReactiveVar();
template.searching = new ReactiveVar(false);
template.autorun(function () {
template.subscribe('patients.appointments.search', template.searchQuery.get(), function () {
setTimeout(function () {
template.searching.set(false);
}, 300);
});
});
});
Template.appointmentNewPatientName.onCreated(function () {
this.subscribe('patients.appointments');
});
So here's my problem: When I use the second subscription (to appointments.patients), the first one doesn't work. When I comment the second subscription, the first one works again. I'm not sure what I'm doing wrong here.
The issue here is you have two sets of publications for the same Collection. So when you refer to the collection in client there is now way to specify which one of the publication it has to refer too.
What you can do is, publish all data collectively i.e. all fields you are going to need and then use code on client to perform queries on them.
Alternatively, the better approach will be to have two templates. A descriptive code:
<template name="template1">
//Code here
{{> template2}} //include template 2 here
</template>
<template name="template2">
//Code for template 2
</template>
Now, subscribe for one publication to template one and do the stuff there. Subscribe to second publication to template 2.
In the main template (template1) include template2 in it using the handlebar syntax {{> template2}}
How can I use reactive template variables (from Template.data) in an anonymous function within the template rendered function? (I want to keep it reactive).
Template.templateName.rendered = function() {
function testFunction(){
//Log the field 'title' associated with the current template
console.log(this.data.title);
}
});
Not sure exactly what you are trying to do (like printing this.data.title whenever it changes?), but you should:
use a Reactive variable (add reactive-var package, then create a var myVar = new ReactiveVar()
If necessary, wrap your function with Tracker.autorun (or this.autorun in a template creation / rendered event).
So you could have like:
Parent template HTML:
<template name="parentTemplateName">
{{> templateName title=myReactiveVar}}
</template>
Parent template JS:
Template.parentTemplateName.helpers({
myReactiveVar: function () {
return new ReactiveVar("My Title!");
}
});
Template JS:
Template.templateName.onRendered(function() {
// Re-run whenever a ReactiveVar in the function block changes.
this.autorun(function () {
//Print the field 'title' associated with the current template
console.log(getValue(this.data.title));
});
});
function getValue(variable) {
return (variable instanceof ReactiveVar) ? variable.get() : variable;
}
What worked for me was simple using autorun() AND using Template.currentData() to grab the values from within autorun():
let title;
Template.templateName.rendered = function() {
this.autorun(function(){
title = Template.currentData().title;
});
function testFunction(){
console.log(title);
}
});
Template.templateName.onRendered(function(){
console.log(this.data.title);
});
I need to catch an user's input, precisely one specific button. I caught this in this way
Template.main.events({
'keypress input': function (e) {
if (e.charCode === 32) {
console.log("Hit");
};
}
});
and in the template it's something like this
<template name="main">
{{test_var}}
<input type="text">
</template>
It's works, but i need it without an input box on a page.
Template events are restricted to the piece of DOM contained within the template, and within that piece only form elements respond to keyboard events. To capture global keyboard events, you should use jQuery.
Template.main.rendered = function() {
$(document).on('keypress.mainTemplate', function() {
...
});
};
Template.main.destroyed = function() {
$(document).off('keypress.mainTemplate');
});
I'm new to Meteor.
Trying to render items from collection but Meteor.renderList(observable, docFunc, [elseFunc]) alway go to elseFunc.
this.ComponentViewOrdersFlow = Backbone.View.extend({
template: null,
initialize: function() {
var frag;
Template.ordersFlow.events = {
"click a": function(e) {
return App.router.aReplace(e);
}
};
this.template = Meteor.render(function() {
return Template.ordersFlow();
});
console.log(Colors);
frag = Meteor.renderList(
Colors.find(),
function(color) {
console.log(color);
},
function() {
console.log('else consdition');
}
);
},
render: function() {
this.$el.html(this.template);
return this;
}
});
Initially I thought that Collection is empty, but console.log(Colors) shows that there are items in collection. Moreover if I use Meteor.render(... -> Template.colors({colors: Colors.find()}) ) it renders template end show Collection items there.
Meteor version 0.6.6.3 (Windows 7, 64bit)
Mongo - connected to MongoLab
Thank you for any help.
Jev.
Can't really explain this well in the comments, so here is a very, very simple example of using the Meteor template engine. This is a 100% functional app, showcasing basic reactivity. Note that I never call render() or renderList() anywhere.
All this app does is show a button, that when clicked, adds a number to a list. The number is reactively added to the list, even though I never do anything to make that reactivity explicit. Meteor's templates are automatically reactive! Try it out - this is all of the code.
numbers.html:
<body>
{{> numberList}}
</body>
<template name="numberList">
<ul>
{{#each numbers}}
<li>{{number}}</li>
{{/each}}
</ul>
<button>Click Me</button>
</template>
numbers.js:
var Numbers = new Meteor.Collection("numbers");
if (Meteor.isClient) {
Template.numberList.numbers = function() {
return Numbers.find();
};
var idx = 0;
Template.numberList.events({
"click button": function() {
Numbers.insert({
number: idx
});
idx++;
}
});
}
I am using the select2 package from atmosphere in my Meteor.js-project. I am however unable to get the native 'change' to my event-handler in the template. I need this to access the object context in the template.
This does not fire when changing the select value in a Select2-select box:
Template.myTemplate.events({
'change .newValue' : function () {
console.log("I am not fired :(");
console.log("But I can access this. :)", this);
}
}
This, however, does work. The only problem is that I can't access the "this" context from the template, which is what I need.
Template.myTemplate.rendered({
var self = this.data;
$('.newValue')
.select2()
.on('change', function () {
console.log("I am fired! :)");
console.log("I can access self, and get the currently logged in user", self);
console.log("But that is not what I want. :(");
}
}
Select2 rewrites the <select> tag into a series of <div>s, so you don't actually have a change event for the native event handler to grab.
What you could do is stash the _id property of your template data in the id of your select2 element. Your select2 on change listener passes a jQuery event and using it's target you can recreate the missing context. It's ugly but works.
Edit:
What I mean is put the Mongo document _id into the html element id field, like so:
template.html
//...
{{#each dropdown}}
<select id="{{_id}}" class="select2">
{{#each options}}<option value="{{ serialNo }}">{{ name }}</option>{{/each}}
</select>
{{/each}}
//...
template.js
Template.template.rendered = function () {
$('select2').select2({
// ...
}).on('change', function (e) {
console.log(e.target);
});
// ...
Template.template.dropdown = function () {
return Dropdowns.find();
}
Assuming your dropdown document was something like:
{
"_id" : "7MzpRfzyCDTgz4QXJ",
"name" : "dropdown1",
"options" : [
{
"serialNo" : 1,
"name" : "Option 1"
} , {
"serialNo" : 2,
"name" : "Option 2"
}
]
}