Angular type filter


#1

I’ve been dabbling in angular for a while and I’m wondering how to do things in meteor / Blaze. I’m specifically talking about the angular “filter”. See here for example on what I would like to achieve with meteor / Blaze.

Can someome show me how this is done in meteor/blaze?


#2

Hi gsuz,

I’m new to meteor, but this is done with Helpers in meteor. E.g.

Template.myTemplate.helpers({
  statusClass: function(status) {
    if (status.idle) return 'info';
    if (status.online) return 'success';
    return 'warning';
  },
  statusText: function(status) {
    if (status.idle) return 'Idle';
    if (status.online) return 'Online';
    return 'Offline';
  }
});

Note that helpers are only available in templates. If you want to reuse them in “events” you can define your own Helpers class and link them in.

// These are available in events
Helpers = Helpers || {};
Helpers.myTemplate = {
  showStep: function(nextStep) {
    // do a thing
  },
  when: function(when) {
    return Session.get('when');
  },
  what: function() {
    return Session.get('what');
  },
};

// These are available only in templates
Template.myTemplate.helpers({
  when: Helpers.myTemplate.when,
  what: Helpers.myTemplate.what,
  error: function() {
    return Template.instance().error.get();
  },
});

// These are the events
Template.myTemplate.events({
  'click .step-button-prev': function(e, template) {
    template.error.set(false);
    Helpers.myTemplate.showStep('what');
  },
  'click .step-button-next': function(e, template) {
    template.error.set(false);
    Helpers.myTemplate.showStep('payment');
  },

Angular is a bit fascist about the global namespace. Meteor is a bit cowboy.

There may be a better way, but that’s where I started :smile:

Good luck!


#3

@michaelcole I’m not sure we’ve understood each other correctly. I’m looking for a filter on-the-fly solution for meteor similar to the one in AngularJS.

I’ve made the following MeteorPad to better explain what I’m trying to accomplish. I want the list of clients to be filtered as soon as I start typing into the filter: search box.

MeteorPad: http://meteorpad.com/pad/tECZ3ewA6vjqWzTXq/Angular%20filter%20test


#4

Hey @gsuz, try the https://www.discovermeteor.com/ book, or the Todo App Tutorial. I think one or both show how to do client-side filtering.

Cheers!

Mike