Angular-like client side data binding and reactivity with Meteor?

Question

I'm trying to wrap my head around Meteor's way of dealing with reactivity and I want to make sure I've got some concepts right.

Take the follow reactivity example:

A user types something into a form field. The thing that he is typing is instantly displayed somewhere else on the page, as the user is typing, letter by letter. An instantaneous duplication.

From what I know about Angular, this is a very common example of reactivity. Angular binds the input directly to the output on the client side. There's nothing in between.

Correct me since I could be wrong, but Meteor can do this, but the input would first need to be captured and stored into a Mongo + MiniMongo DB (perhaps only as a collection in local storage), there would need to be a subscribe step, and those values would then be read and displayed on the page.

Is there a way to directly bind an event on the front end to another thing on the front end like Angular does?

Is this right? For Meteor to have the front-end-only reactivity of Angular it must first go through the intermediary of a collection, meaning extra code would be necessary to accomplish this compared to Angular?

The example in the Meteor Docs:

Deps.autorun(function () {
  Meteor.subscribe("messages", Session.get("currentRoomId"));
});

So here, when the data of currentRoomId changes, the function is reactive to that data change and the function runs (in this case Meteor subscribes to messages).

Using Session variables is the only way I see of possibly binding two parts of a view together directly. Are there other ways?

user3374348 user3374348 · Accepted Answer · 2014-05-29T11:48:06

Meteor's client-side reactivity system (Deps) is not coupled with its live MongoDB syncing. You can use it with any reactive data source which implements the right interface, including data sources which are entirely client-side. For example, you can use the built-in Session object. This is just a client-side key-value store with support for Meteor's reactivity, and you don't have to do any publish or subscribe to use it.

This standard way to do this sort of thing looks something like this:

<input id="field" value="{{fieldValue}}">

Template.form.fieldValue = function () {
  return Session.get("fieldValue");
};

Template.form.events({
  "input #field": function (evt) {
    Session.set("fieldValue", $(evt.currentTarget).val());
  }
});

Now the Session variable fieldValue is synced up to the form field. You can call Session.get("fieldValue") in some helper and that template will re-render when the user types in the form field. And if you call Session.set("fieldValue", "blah") then the form field will update itself.

As for your edit: You can make your own reactive data sources using Deps.Dependency, or you could meteor add reactive-dict although that's not documented. There may be packages on Atmosphere.

Angular-like client side data binding and reactivity with Meteor?

1 Answers