I tried the standard way, but what happens is that currentOdds of all the child templates receive the value given to the reactive-var in the last child template created. o.O
Is this a bug of Meteor? This is how I did it:
Template.ChildTemplate.onCreated(function () {
instance = this;
odds = ... (dynamically generated)
instance.currentOdds = new ReactiveVar(odds);
});
I wasn't doing anything wrong, the issue I had was because of a bug in Blaze (1)
There's nothing that we're supposed to to different when attaching a Reactive-Var to a child template, compared to a normal template. It should be done in the same manner.(2)
Related
I'm using Polymer and I am encountering a Problem. I think there is a good solution, but I still don't have the perfect understanding of polymer.
In my template I get a dom-repeat which gets me some _itemsas item. item.name returns the name of the item, it works just fine. Now I want to use this name to display it in a tooltip, so I call the function on-mouseenter="_showTooltip".
My function looks like this:
_showTooltip: function(e) {
var item = Polymer.dom(e).rootTarget;
//........here I get Information out of my item to use it in my tooltip and display it
}
How can I transfer the information of my original item to this function?
Thanks in advance!
You did not mention or tag which version of Polymer you're using so I will point you to the docs for Polymer 2 because that's what I use, but I am guessing something similar must exist for Polymer 3 also.
Any event triggered from elements rendered inside a dom-repeat will get a model key added, under which you will have the context, so you will have your item from HTML there.
You can see that in the docs here.
To start you can try to:
_showTooltip: function(e) {
var item = Polymer.dom(e).rootTarget;
//........here I get Information out of my item to use it in my tooltip and display it
console.log(e.model); debugger;
}
and continue from there..
I'm currently getting used to using FlowRouter after a while using Iron Router and trying to set up some best practices. I'm subscribing to my collection at a template level.
Previously I've waited for a template to render using onRendered and then targeted my input field and applied focus(), however I am now trying to only show my template in Blaze when the subscriptions are ready using the following (please excuse the Jade but I think it's pretty clear in this case)
template(name="subjectNew")
unless Template.subscriptionsReady
+spinner
else
form
input(type="text" name="name")
So the basic idea is that until the subscriptions are ready the spinner shows. The issue I'm having is that now even when the template renders, the focus won't apply. I've tried various methods of wrapping it in an autorun call but not sure the best way of trying to target the first field when combined with this approach?
Template.subjectNew.onRendered(function() {
console.log('rendered');
$('input').first().focus();
});
Is it possible?
Many thanks for any ideas.
Your subjectNew is considered rendered even when it is only showing the spinner. Just stick your:
form
input(type="text" name="name")
Into a separate template and then attach your focus code to the onRendered handler of that other template.
template(name="subjectNew")
unless Template.subscriptionsReady
+spinner
else
+myForm
template(name="myForm")
form
input(type="text" name="name")
js:
Template.myForm.onRendered(function(){
$('input').focus()
});
I think using an autorun would be a good approach but then you would have to employ Tracker.afterFlush() to wait to set the focus after the form is rendered.
Something like:
Template.subjectNew.onRendered(function() {
this.autorun(() => {
if (this.subscriptionsReady()) {
Tracker.afterFlush(() => $('input').first().focus());
}
});
});
I'm currently developing a Meteor application where I use the video.js-Library.
I have the following template:
template(name='foo')
.video.embed-responsive.embed-responsive-16by9
with richMediaContent
video#video.video-js.vjs-default-skin.vjs-big-play-centered(controls='' preload='auto')
source(src='{{video.videoUrl}}' type='video/mp4')
p.vjs-no-js {{i18n 'videoTagNotSupported'}}
Initializing the video.js-Library after the template is rendered works fine.
Template.foo.onRendered ->
videojs document.getElementsByClassName('video-js')[0], {}
But the videojs-Library is not reinitialized if the same template is rendered with a different video (with a different richMediaContent).
I've already tried to move the video-Part in an own template and included it in the foo-Template so that the onRendered-Call should get called every time a new video is loaded. But this doesn't seem to work.
Do you have any idea how I can reinitialize the library if the video changes?
Thanks in advance!
New answer
Indeed, when your route changes but uses the same template, the said template does not get rendered again, therefore your js plugin call will not trigger a second time. What you can do instead is call your js plugin in an onAfterAction call, within your route definition:
Router.route('/video/:_id', {
name: 'video_page',
template: 'foo',
// ...
onAfterAction: function () {
videojs document.getElementsByClassName('video-js')[0], {}
}
});
Previous answer
I think you are looking for the almighty this.autorun. At the end of your onRendered function, it should look like this (I type it in pure javascript)
this.autorun(function () {
var video = Session.get("video"); // reactive data
videojs document.getElementsByClassName('video-js')[0], {}
});
The idea is that the first line must include, within the autorun function, a way to get your reactive data. In that case, I use the Session which is reactive. Collections are also reactive, so another way would be something like Videos.findOne();. This will depend on how you get that video element.
What this does is that any time the reactive data changes, the callback for this.autorun will run again, and your video plugin will be reset.
Struggling here with what would otherwise be a simple $( document ).ready().
Not sure what I'm doing wrong.
Materialize needs jquery components to be initialized on DOM ready. Finding a way to initialize components on all views is surprisingly tricky.
Here is the online DEMO
From reading the docs: this should initialize everything the sub-templates require:
Template.layout.rendered = function(){
$('ul.tabs').tabs()
}
}
However, this only works on a hard page refresh, and not with links routing the views.
So instead you would have to initialize on each template that element will be used
Template.x.rendered ...
Template.y.rendered ...
Here is the github code
BTW We've tried iron-router events:
onRun
onBeforeAction
onAfterAction
All of these seem to happen before the route's template content is present. I noticed that onBeforeAction required a call to this.next() to go on, I even tried looking for the DOM content after the next call.
I also tried rewriting our routes like this:
Router.route('someRoute', function() {
this.render('someRoute');
// look for DOM content, still not found
});
Just to be clear, the reason this is happening is because your layout is only firing the rendered hook once. When you switch routes the layout template will not be rerendered, only the templates in the yield region will be. The previous template in that region gets destroyed and the next one rerendered. This means you have to run $('ul.tabs').tabs() again for that Template as the DOM elements it contains are rerendered.
Putting that code in the rendered function of the template that uses it works because that rendered hook gets run every time that particular template gets rendered again.
A way you could get around this could be to create a Template specifically for your tabs, like a control in a way, that calls $('ul.tabs').tabs() in its own rendered function. You could then put this control on a template that needed it and pass the required arguments, like number of tabs and content for each tab etc. It's a bit of work though, and I'd only consider it if I had a really large number of templates that used the tab control.
I have implemented jPanel Menu via a rendered template, which works great, until a route has been changed, then the menu stops working. Here is the code I am using to evoke the plugin.
Template.mobileMenu.rendered = function(){
var jPM = $.jPanelMenu({
menu: '#mobile-menu',
trigger: '.menu-trigger'
});
jPM.on();
};
The template is loaded on all pages in the footer. I am thinking it needs to be rerun on route change, OR prevented from being rerun. I am not sure which. Thanks for any tips.
This sounds similar to the problem many people have with using 3rd-party ui components. I put together a working example of using a modal dialog component which may be of some help:
https://github.com/alanning/meteor-modal-example
Also I should point out that the new Meteor UI rendering system, "Blaze", should eliminate these kinds of issues. I would expect Blaze to be released soon.
(For those visitors coming from the future, at the time of writing Meteor v0.7.0.1 is the latest version.)
The solution was to wrap it in an if not rendered, to prevent it from being re-rendered on template / route changes.
Template.mobileMenu.rendered = function(){
if (!this.rendered){
var jPM = $.jPanelMenu({
menu: '#mobile-menu',
trigger: '.menu-trigger'
});
jPM.on();
this.rendered = true;
}
};