CODEWITHSUNDEEP
cssdommeteorpolymer
Cristian Garcia
Cristian Garcia

Reputation: 9859

Meteor and CSS Transforms

I am thinking that to do some animation with CSS transforms it was horrible to have to build strings

someDOMElement.webkitTransform = "translate(" + x + "px," + y + "px," + z + "px)";

Then I remembered templates and thought a nice cheat would be

{{#with object}}
    <someTag style="-webkit-transform: translate( {{x}}px, {{y}}px, {{z}}px )">

And then in meteor

Template.someTemplate.object = function() {
    someDep.depend();
    return someObj;
};

Finally to redraw after modifying the object I would just have to call

someDep.changed();

Two issues here are

  1. Number of lines increased.
  2. Does Meteor handle these small changes in the DOM efficiently?

Anyone heard of Polymer? Their two way binding of data seems perfect for this, I heard they are able to detect changes on objects and reflect them in the DOM so ideally you could, in Meteor terms, just do something like:

Template.someTemplate.object = someObj;

No need for Deps.

Thanks in advance!

Upvotes: 0

Views: 172

Answers (2)

fabien
fabien

Reputation: 2258

Bind datas the way you try to bind them is mabye not the best way to obtain a nice UI. I see the data binding as an amazing thing for the "actual" datas (time, name, place...). But for the UI, the way we used to build web applications until now seems still efficient.

You should consider using something like greensock (https://atmospherejs.com/package/gsap).

When your data change, you start a tween with to(), and that's it. (or you set the properties with set()).

Meteor will never use fine optimization like the request animation frame to update the DOM. This is why we use gs (or famous in the future) to handle that kind of things. (https://github.com/percolatestudio/meteor-famous-demos)

Upvotes: 0

Bern&#225;t
Bern&#225;t

Reputation: 1391

You probably don't need to bother with the low-level Deps interface (like depend and changed) unless you are writing some library or something really sophisticated. Meteor has two very versatile reactive sources for general use: Session and Collection.

For easy tasks, you can use Session:

Template.someTemplate.object = function() {
    return Session.get("user.location");
};

And when something changes

Session.set("user.location", {x:4, y:12, z:5});

You can use the same object and re-set it:

obj = {x:4, y:12, z:5}
Session.set("user.location", obj);
obj.z = 25;
Session.set("user.location", obj);

At both set method calls, Meteor will update the DOM.

If you have more complex data structures, you can use Meteor.Collecion's and cursors, which will also trigger the recomputing and DOM updating automatically. See the Leaderboard code for an example.

(Btw, if you have 3 coordinates, you probably need translate3d() instead of translate())

Upvotes: 1

Related Questions