2

Is there a way to read from a Session variable without re-rendering the template when it changes?

The scenario:

I change the style of elements dynamically using jQuery, but when a new element is created I want to set its default style (I know I could call the same jQuery command when the element is rendered)

Example:

<template name="image">
    <!-- How can I avoid -height- being reactive -->
    <img src="img.jpg" style="height: {{height}}">
</template>

Templates.image.height = function() {
    return Session.get("height");
};

Templates.controls.events = {
    'click #btn': function() {
        // Change the height of all exiting images
        $("img").css({height: Session.get("height")});
    }
};

I would like every new image added to have the height stored in the session variable without re-rendering the img. All the solutions I can think of feel like hacks.

1
  • I've edited my post, I'm not sure what you're doing with the button but to stop the image refreshing you can use isolate to change only s a small block
    – Tarang
    Mar 12, 2013 at 11:42

2 Answers 2

3

Session stores its values in Session.keys, but they're serialized. To deserialize them, you can use the parse function from https://github.com/meteor/meteor/blob/master/packages/session/session.js :

var parse = function (serialized) {
  if (serialized === undefined || serialized === 'undefined')
    return undefined;
  return EJSON.parse(serialized);
};

Then, instead of Session.get('key-name'), do: parse(Session.keys['key-name']). This should do the same as Session.get without invalidating any contexts. Putting all this together, here's an approach that seems to work:

Session._parse = function (serialized) {
  if (serialized === undefined || serialized === 'undefined')
    return undefined;
  return EJSON.parse(serialized);
};

Session.getNonReactive = function (key) {
  var self = this;
  return self._parse(self.keys[key]);
};    

UPDATE 3/13/2013: Meteor just released v0.5.8, and with it a new function. Here's the new way to do this:

Session.getNonReactive = function (key) {
  return Deps.nonreactive(function () { return Session.get(key); });
};  

UPDATE 15/2/2016 Meter is currently deprecated, though it still works. Use Tracker instead:

Session.getNonReactive = function (key) {
  return Tracker.nonreactive(function () { return Session.get(key); });
};  
2

You can use preserve : http://docs.meteor.com/#template_preserve

Why not use only jquery or handlebars to handle the value, why both? With consistency so you can manage you're code better.

I could help you with an example if you posted some code up

Edit That example with your code

Your code using handlebars only:

<template name="image">
    <!-- How can I avoid -height- being reactive -->
    {{#isolate}
    <img src="img.jpg" style="height:{{height}}">
    {{/isolate}}
</template>

Template.image.height = function() {
    return Session.get("height") || "0px"; //Default height is no session defined
};

Template.controls.events = {
    'click #btn': function() {
        //What does this do exactly?
        //$("img").css({height: Session.get("height")});

        Session.set("height","40px");
    }
};

To prevent your whole template being re-rendered put your reactive variable {{height}} in a {{#isolate}}. See reactivity isolation: http://docs.meteor.com/#isolate

5
  • Sounds great. But as soon as I add {{#isolate}} inside style it doesn't render as expected. Did you try it?
    – Xyand
    Mar 12, 2013 at 12:16
  • I tried it again without isolate and I can't get the images to refresh/redraw: gist with the project I used to test that @ gist.github.com/anonymous/5142555
    – Tarang
    Mar 12, 2013 at 12:39
  • So with this i've moved the isolate abit so this should work as you want
    – Tarang
    Mar 12, 2013 at 12:41
  • But now the image gets re-rendered every time the size changes. This is what I wanted to avoid in the first place. See original code.
    – Xyand
    Mar 12, 2013 at 14:19
  • Please try the code in the gist to see if it re renders, I can't get it to redraw, maybe you're doing something jqueryey to the image?
    – Tarang
    Mar 12, 2013 at 14:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.