Lepozepo / meteor-ui-hooks

A simpler API for Blaze UI hooks

Meteor UI Hooks

A simpler API for Blaze _uihooks

Installation

meteor add gwendall:ui-hooks

Methods

Template[tplName].uihooks(hooks)
Set the insert, move, remove as you would do with vanilla _uihooks. Optionally pass the container of the items you want to look at (recommended).

Example

Template.layout.uihooks({
  ".item": {
    container: ".container",
    insert: function(node, next, tpl) {
      console.log("Inserting an item.");
      $(node).insertBefore(next);
    },
    move: function(node, next, tpl) {
      console.log("Moving an item.");
    },
    remove: function(node, tpl) {
      console.log("Removing an item.");
      $(node).remove();
    }
  }
});

This is it. With this much simpler syntax, you can now play with UI hooks as you would do traditionally.
Some more code for the complete example, should you need it.

Items = new Mongo.Collection("items");
Items.insert({ title: "foo" });

Template.layout.helpers({
  items: function() {
    return Items.find();
  }
});

<template name="layout">
  <div class="container">
    {{#each items}}
      <div class="item">{{title}}</div>
    {{/each}}
  </div>
</template>