This is a copy paste of support question from gitter
Neobii 5 hours ago:
is the new _onRender stuff going to help with integrating 3rd party stuff
I'm using this package
https://atmospherejs.com/rzymek/fullcalendar
and in order to not get an error I have to use a setTimeout
actually, most of the time it renders, but sometimes it throw an error
Exception from Tracker afterFlush function:
debug.js:41 TypeError: Cannot read property 'clone' of null
at _fetchEventSource (fullcalendar.js:8985)
at fetchEventSource (fullcalendar.js:8940)
at fetchEvents (fullcalendar.js:8934)
at fetchAndRenderEvents (fullcalendar.js:8114)
at Calendar_constructor.refetchEvents (fullcalendar.js:8083)
at HTMLDivElement.<anonymous> (fullcalendar.js:37)
at Function.jQuery.extend.each (jquery.js:384)
at jQuery.fn.jQuery.each (jquery.js:136)
at $.fn.fullCalendar (fullcalendar.js:29)
at null.<anonymous> (calendar.js?082a22e3120963d2c9a0fdce2c81ca4443e6728d:34)
@gadicc 4 hours ago:
_onRender is just a shortcut, it doesn't add any functionality.
e.g. before you'd have to do:
body
with someData
+Surface template="myTemplate"
template(name="myTemplate")
div Hello, #{name}
Template.body.helpers({
someData: { ... }
});
Template.myTemplate.onRendered({
// do something
});
but now you can save a few steps.
body
with SomeData
+Surface _onRender=onSurfaceRender
div Hello, #{name}
Template.body.helpers({
someData: { ... },
onSurfaceRender: function() {
// do something
}
});
As for your issue, I think you'll probably be ok if you just use this.$(something) instead of $(something) in your onrendered code.
But hard to be sure without seeing the code.
Neobii 4 hours ago:
@gadicc 4 hours ago:
mm, that's weird, that should work perfect. which is the line that's throwing the error? 
Neobii 4 hours ago:
I pasted my stack trace up there
<template name="calendar">
{{#Scrollview}}
{{#Surface size="[undefined, true]"}}
{{> calendarTemp}}
{{/Surface}}
{{/Scrollview}}
</template>
<template name="calendarTemp">
{{> fullcalendar id="allEventsCalendar" events=events}}
</template>
that's the code in my app
@gadicc 4 hours ago:
and events helper?
Neobii 4 hours ago:
Template.calendarTemp.helpers({
events: function () {
var fc = $('#allEventsCalendar');
return function (start, end, tz, callback) {
//subscribe only to specified date range
Meteor.subscribe('calendar', start, end, function () {
fc.fullCalendar('refetchEvents');
});
var events = Events.find().map(function (show) {
show.title = show.name;
show.url = "/show/" + show._id;
switch(show.allowedAges) {
case "all-ages":
show.color = '#147a91';
break;
case "18andUp":
show.color = '#efa44b';
break;
case "21andUp":
show.color = '#38d6a5';
break;
}
return show;
});
callback(events);
};
}
});
ahh I see... maybe I need to put a this there~
nope
is the this.$() available in the rendered callback and not events?
@gadicc 4 hours ago:
var ti = Template.instance();
var fc = ti.$('#allEventsCalendar');
Neobii 4 hours ago:
Exception in template helper: Error: Can't use $ on template instance with no DOM
@gadicc 4 hours ago
really? that's weird. ok give me a few mins to think about this.
Neobii 4 hours ago
reminds me of trying to integrate 3rd party package before rendered was called once in meteor
gadicc 4 hours ago
@feidens, i'm going to run out of battery, but I can definitely do this today. otherwise try my other strategy for a quicker fix.
@Neobii, yeah, it's related to that. gets more complicated when mixing with famous hehe. i think I have it though, keep that ti line at the beginning and move the var fc = ti.$(...) to inside the inner function.
guys i'll be back later when we have mains electricity again
Neobii 3 hours ago
nice, the error doesn't pop up now, but the calendar still doesn't always render...
would you like me to build you a test case?
since it's in a scroll view too, it gets the incorrect height and won't let me scroll all the way down if it doesn't all load initally
gadicc 3 hours ago
yeah, a minimalist repo would be great i'll play with it later today. for sizing, you should be ok with size="[undefined,true]" watchSize=true.
Neobii 3 hours ago
well when it renders correctly, the size is happy
ah! so productive, I'll see if I can get a test case to you by later today!
gadicc 3 hours ago
@feidens, oh, this is probably easier than what I said before Blaze.getData(fview.surfaceBlazeView); but in famousEvents it would be nice too.
@Neobii, yeah i'm sure we can get it working.
gadicc 3 hours ago
@feidens, this in famousEvents works now in v0.2.1
Neobii 2 hours ago
https://github.com/Neobii/CalendarFamous
there ya go!
let me know if you see any errors straight off the bat
Neobii 2 hours ago
it seems on this minimal repo, the calendar fails to load more often
feidens 2 hours ago
@gadicc the problem is that if you updated the data you get the old one with Blaze.getData(fview.surfaceBlazeView);
@gadicc thanks for the fix in famousEvents I will test it.
Neobii an hour ago
http://famouscalendar.meteor.com/ here's it deployed too if that helps
gadicc an hour ago
@feidens, really? can you show me your template/helper structure? maybe even minimal repro? I tested something like {{#with data}}{{>Surface}}{{/with}} and the same thing for a regular Meteor structure, both get the right this when the event is run. Maybe you're calling that too early?
@Neobii, great! just came back now. on it
can you give me some sample event data to insert? i seem to be also missing the Event = define.
Neobii an hour ago
you actually don't need events in the collection
just need to attach the calendar to the collection
gadicc an hour ago
ok great sec
Neobii an hour ago
I put the collection definition in common
reaction commerce does that
I'm on the fence where to put that or lib
gadicc 44 minutes ago
yeah lib is fine
anyways, don't blame you for struggling with this, it's not simple. the fullcalendar plugin sets it's height by looking at the available width, but the width is 0 at "render" time because we're not fully on the DOM yet. well, to cut a long story short, i guess this is the fix:
Template.calendarTemp.onRendered(function() {
var ti = Template.instance();
var div = ti.$(ti.firstNode);
famous.core.Engine.nextTick(function() {
famous.core.Engine.nextTick(function() {
div.fullCalendar('render');
});
});
});
there are cleaner ways of doing it but not that cover all cases... i think this is ok though
Neobii 42 minutes ago
oh wow, a double nested nextTick?
gadicc 42 minutes ago
yeah, i wasn't so happy with that... but in terms of what fullCalendar is expecting, that's what it needs 
Neobii 40 minutes ago
okay so the width is 0 and so it makes the height 0 as well, do you think many other 3rd party plugins like this will need the same kind of help?
gadicc 40 minutes ago
otherwise we can manually specify the height, that's actually better... we could also try work that out ourselves.
mm
Neobii 40 minutes ago
in the calendar plugin?
what am I manually specifying the height on?
gadicc 38 minutes ago
yeah for the plugin. i'm just looking at their API now. one sec
mmm perhaps i'm wrong about the height. it's hard to know exactly what's going on without reading through all the fullcalendar code :> two ticks aren't my favourite but it's only 34ms
Neobii 34 minutes ago
hmm that solution didn't seem to work for me
gadicc 33 minutes ago
really? any errors or anything? it's consistent for me on reload, route change, everything 
Neobii 33 minutes ago
I'm trying it out in my real app, and no bones
wanna send me a pull request to make sure I'm doing it right?
gadicc 30 minutes ago
literally just added that in client/calendar.js, no other changes.
same thing? no errors and no render?
Neobii 30 minutes ago
okay, let me try that in the test case
works 100% in the test case
gadicc 25 minutes ago
typical haha.
ok look for the short term maybe just instead of the nextTick stuff do a timeout for 100ms and we'll try find a better way in the future.
Neobii 25 minutes ago
yup I've been doing a setTimeout of 300ms
that's about the right time 
but it doesn't get the nice fade in of the render controller
gadicc 22 minutes ago
300ms????
i'd love to know what's going on. just a pity i need to understand fullcalendar's complete rendering code first
