Being studying Meteor myself I'd like to help beginners like me. I have searched for certain decisions that became wired to me after python development. So I'll just leave them here for your consideration.
Imagine a situation when you need to bind your plugins to a newly rendered template. If you are diving into asynchronous JS dev, like I did and have developed AJAX websites... You will, one word, be quite confused because main concepts are different from the one's you used to know. Anyhow I'd try to explain on this simple task.
Assume we have a template:
<template name="site-part">
<p>{{my-text}}</p>
</template>
|
And I render it's content like so:
Template.site-part.content = function() {
return Session.get("my_data");
}
So I have this template piece rendered when "my_data" variable appears in session. And I have events binded to newly rendered webpage:
Template.site-part.events = {
'click input': function (e,r) {
// my scripts
},
....
}
So when my page is rendered I'm binding the events to certain DOM elements. This is all good, unless you would need to attach some plugin to your newly rendered DOM elements. E.g. on rendering this
<p> element please execute those scripts. In a jQuery world and simple AJAX web pages you would just add a
.live() or
.on() or even
.load() and so on functions that would trigger those your JavaScript code on it's creation in a DOM. It may work in some cases. But Meteor has fansy trigger to bind your code exactly after template is rendered. It is described on a meteor docs page:
http://docs.meteor.com/#template_rendered. But I'll make some example here for better understanding:
Template.site-part.rendered = function() {
$('p').tooltip();
}
This is a .rendered function after main template name. All magic happens there. Line up your jQuery code and bind your events and plugins there.
This
.tooltip() is a binding of a simple JavaScript plugin from a bootstrap package. And is here just only for example of of a common task. E.g. animation of elements after rendering. Like adding a tooltip for them after rendering a Meteor template. Hope this all makes sense to you and will help sometime.
Comments? I'm wrong? Suggestions?
I'm trying to include an external script with a recaptcha in the in a form in the HTML template. The script tag src looks like:
ReplyDeletesrc="http://www.google.com/recaptcha/api/challenge?k=6LcBoO8SAAAAAKNgu2AWLuAiqzgM0CSAywJJzCwU"
Can you please help me with and advice to make this work in Meteor?
I do not think it's a straightforward decision. You should use another type of recapcha binding. E.g. with separated html template and JS part. So you could bind the JS after template is rendered.
DeleteThank you for your answer, I will use the JS binding after the template is rendered!
DeleteThis was super helpful, thanks! One note: be sure to define your template as narrowly as possible. This is necessary if using nested templates or an instance template (listing from a collection). I stumbled on that one.
ReplyDelete