Meteor Tips - UI Hooks woopsies
Sep 18, 2015 00:00 · 233 words · 2 minute read
Meteor’s undocumented _uihooks
feature is pretty awesome. It gives us the ability to hook into the DOM manipulation functions that we normally get for free with reactive templating. Sometimes we need to control how things get rendered, for example if elements need entry or exit animations. Here is a great article that gives an overview on _uihooks
.
Unfortunately, as happens with life on the bleeding edge, undocumented features change, and there is no authoritative place to check out why your working code is now breaking. This happened recently when the API for _uihooks
changed.
Previously you could use _uihooks
like so:
Template.container.onRendered(function(){
this.find('.list-wrapper')._uihooks = {
insertElement: function(node, next){
// Do things before inserting
$(node).insertBefore(next);
// Do things after inserting
}
};
});
Where node
was the new node to be inserted, and next
was the element that the new node needed to be inserted before. Meteor used to render empty text nodes in all templates, thereby always having an element to insert our new node before. When this changed, upon inserting a node as the last child in the container, next
would be null
. A possible way to change this is like this:
Template.container.onRendered(function(){
var container = '.list-wrapper';
this.find(container)._uihooks = {
insertElement: function(node, next){
// Do things before inserting
if(_.isNull(next)){
$(container).append(node);
} else {
$(node).insertBefore(next);
}
// Do things after inserting
}
};
});
Alternatively, there is this great package: https://github.com/gwendall/meteor-ui-hooks.
Happy rendering!