Sunday, March 29, 2015

Meteor template events and topmost element

While writing a custom template, I discovered that events from the topmost element in the template are not caught by template.events which is a strange but workable issue in Meteor. Just wrap the whole body within a dummy div as shown:

<template name="sometemplate">
<div>
<div class="eventSource"> ... </div>
</div>
</template>

Template.sometemplate.events({ 'click .eventSource': function(event, template) {
...
}
});

Thursday, March 12, 2015

The autoform-select2 + AJAX data adventure

While developing a Gig creation form for Zoomout, using meteor-autoform and select2, I realized that search and add feature for adding artists to a Gig would be a problem. Select2 supports AJAX datasource for generating options based on user input, but till version 3.5 it depended on the use of a hidden input field for adding new options on the fly. The autoform-select2 package, although a great tool, did not yet offer support for hidden input fields. #14 from the autoform-select2 issues describes this problem.

Select2 recently released 4.0.0-rc.1 which thankfully removes the need for a hidden input field, but the meteor-select2 package, on which the autoform-select2 package depends, still uses 3.5.1 of select2. So till meteor-select2 releases with an upgraded version of select2, which may happen when select2 makes a stable 4.0.0 release, follow these steps to make use of an AJAX datasource in your meter autofroms:
  1. git clone https://github.com/abhishekbatra/meteor-select2
  2. Create a directory called packages in your meteor project root.
  3. Copy the meteor-select2 directory to the packages directory and rename to select2.
  4. meteor add select2
  5. Use select2's AJAX feature with autoform-select2 using helpers normally.
  6. On the server end, use something like restivus for REST, or a search backend to process queries.