<template name="foo">
I use {{> foo}} various places in my app. I know that from inside Template.foo.helpers I can use Template.instance(), but what about from outside foo helpers/events/hooks?
I don't know what the contents of the various foo instances will be, so I can't use Blaze.getView(node).templateInstance().
Related
I have several instances of sergeyt:typeahead working in my webapp. However today I am building a table out of data from query. One of the columns needs to allow for possibly selecting from a collection or if the user wants to enter their own value.
This has worked for me in other parts. Now it appears that when using an {{#each}} statement in the html and when the typeahead is inside the {{#each}} that it does not receive the injecting.
I believe this may be due to the fact that inject is typically done on the rendered which is run before the {{#each}} has run and created the dom elements. And if that is the case how would I go about then placing the inject on these newly generated elements?
You should be able to create a sub template for each stop:
<template name='myApp'>
{{#each stops}}
{{> stop}}
{{/each}}
</template>
<template name="stop">
<input class="form-control typeahead" ...>
</template>
This way you can call typeahead.inject on each instance after it is rendered.
Template.stop.onRendered(function() {
Meteor.typeahead.inject();
});
I use markdown in a template, and include another template in markdown, as follows:
<template name="hello">
{{#markdown}}
{{> subtemplate}}
{{/markdown}}
</template>
<template name="subtemplate">
<p>Something to show</p>
</template>
Then in javascript, I have:
Template.subtemplate.onRendered(
function() {
console.log("Visited");
return;
}
)
On the page, I do see "Something to show". However, the onRendered hook is not called, as I don't see "Visited" in the console.
If I move the subtemplate outside markdown:
<template name="hello">
{{#markdown}}
{{/markdown}}
{{> subtemplate}}
</template>
I do see the "Visited" in the console.
So, anyway to trigger onRendered hook inside markdown?
Unfortunately there's currently no way to put a template inside markdown helper and have it work interactively. It also applies to event handlers not only onRendered hooks.
The reason this is happening is that what markdown effectively does is it transfer all it's contents to text, then it passes it through a markdown parser and finally renderers the resulting text. The consequence is that the structure of your views get lost in the process.
In fact, the helper was not designed to handle a lot of html content inside of it. Instead you should probably pass only single chunks of text to the markdown helper and try to avoid putting templates inside if they contain some additional logic apart from rendering stuff, e.g. event handlers.
<template name="orderForm">
{{> photographyServicesForm}}
{{> videographyServicesForm}}
{{> onlineProductsForm}}
</template>
If I go to the orderForm page is there a way to get the data inside of the orderForm Blaze template instance when I'm in Chrome Console? I know how to get it inside the orderForm callbacks, events, helpers, and inside the HTML, but I want to be able to easily check up on it and even update it from the Chrome Console.
I also know that there are four different template instances when I go to this orderForm. Obviously Template.orderForm doesn't work because it's not the current template instance.
EDIT
Here's the answer:
<template name="orderForm">
<div id="orderForm">
{{> photographyServicesForm}}
{{> videographyServicesForm}}
{{> onlineProductsForm}}
</div>
</template>
Blaze.getData($('#orderForm')[0])
It should be noted that the same data available on the orderForm template is also available to its child templates - photographyServicesForm, videographyServicesForm, onlineProductsForm
You want to check out Blaze.getData and Blaze.getView.
With Blaze.getData you can simply do this:
Blaze.getData(document.querySelector('.someelement'))
This works pretty well, but you have to have an element inside the template-instance you can query for.
It is very useful to use template.find to locate DOM elements inside a specific template instance. But what happens when the template iterates {{#each}} over some tags without using a sub-template?
<template name="top">
{{#each items}}
<img src="{{src}}">
Click me
{{/each}}
</template>
Tempalte.events(
'click a': (event, template) ->
template.find('img') # This doesn't do the trick
# Is there a better way?
)
Is there a way to easily access the img element associated with the click event?
I know I can use event.target or create another template an use it inside the {{#each}} block. I wonder if there is a better/shorter way to do it.
You could add an #index to the img to make it possible to select it (using js or CSS). How to get index in Handlebars each helper?
I am using Meteor 0.5.2 and trying to solve what seems to me is an obvious pattern that should have an easy solution.
I have a template that should return different chunk of data in each of template instances.
For example - I have a template showing TV program - show by show.
Then I need to display two instances of the same template with different data - one with past shows and one with upcoming shows.
So I have a tv program template:
<template name="tv_program">
{{#each shows}}
...
</template>
Ideally I would like do something like:
{{> tv_program past_shows}}
...
{{> tv_program upcoming_shows}}
to pass a parameter to tv_program template instance that I can read from JavaScript and adjust the mongo queries.
Currently I have copy/pasted my template/js code and adjusted the mongo queries but there has to be a better way.
I looked into partials/helpers with arguments but that doesn't seem to be the solution to my problem.
Thanks, Vladimir
You're approaching the problem at the wrong level. Rather than trying to tell your code what to do from your templates, you should tell your template what to do from your code. For instance:
Template.past_shows.shows = function() { return shows(-1); }
Template.upcoming_shows.shows = function() { return shows(1); }
function shows(order) {
return Shows.find({}, {$sort: order});
}
<template name="past_shows">
{{#each shows}}
{{> show}}
{{/each}}
</template>
<template name="upcoming_shows">
{{#each shows}}
{{> show}}
{{/each}}
</template>
<template name="show">
<li>{{_id}}: {{name}}</li>
</template>
If you are using a state machine for your app, such as meteor-router, you can use one template and populate it with upcoming or past shows depending on app state.