Access current and previous data for setting CSS color in a meteor template

help
1

I have a simple price grid in a template as follows:

<tbody>
    {{#each options}}
    <tr>
        <td>
            <a style="color:red" href="/stock/{{symbol}}">{{symbol}}</a>
        </td>
        <td>
            <span style="color:{{getColor price}}">{{price}}</span>
        </td>
    </tr>
    {{/each}}
</tbody>

I want to set the color of the price using a helper:

Template.dailyOptionGrid.helpers({
    getColor: function(val){
        console.log("Color for: " + val);
        return "red";
    }
});

Here is the problem. The options are coming from a mongo collection. If the new price is greater than the old price (REACTIVE) … I want that color to change to GREEN and otherwise RED.

Any suggestion how to get the current and old data (before rendering?) in the template.

2

Are you saying that there is one price field and you need to refer to the previous value of that field, or are the previous and current prices both stored in the MongoDB doc?

3

Is it a live page and the colors will change from red to green to red…?
If it is supposed to react like that, you need to save the last value somewhere, maybe a reactiveVar

Template.dailyOptionGrid.helpers({
  var retVal = "green";
  if(Template.instance().lastValues.get()[this._id] =! this.price){
     retVal = Template.instance().lastValues.get()[this._id] < this.price ? "green" : red;
    // update lastValues
  }

  return retVal
}
4

This is actually a stock ticker, so the collection gets updated with the updated price and when it gets reactive … i want it to green or red depending on if it goes higher or lower.

@ralof … yeah it is a live page … red to green and green to red … depending on which way it moves.
Any suggestions on the best way to store the values? … there may be 100 stocks or so (options actually … all with a distinct _id)

5

As long as your code is responsible for updating a collection based off the ticker, why not add an extra field for which way it moved, or move price to previous_price as part of the update?

6

Just an associative array, lastValues[this._id] = currentValue, it does not have to be reactive, just available.

Template.name.onCreated(function{ this.lastValues = {}; })

(but I like robfallows solution better)

7

Yep … that sounds good. Its just that I want to reduce data transfer so wondering if it can be managed on the client.

Is there a hook that can be inserted before a reactive update happens? Ideally, it should allow access to the current and previous value of the data.

Thank you.

8

You could use https://docs.meteor.com/api/collections.html#Mongo-Cursor-observe
but that would not make life easier for you.
Good thing with @robfallows solution is that you’d get the right colors directly. When tracking changes, changes need to occur. Since you need to update the db anyway, updating two values instead of one wont kill performance. It is probably the most efficient way.

With observe and my suggestion the page would start from zero each time you visit, not knowing the state 15 seconds ago