CODEWITHSUNDEEP
jquerymeteor
Alex Getty
Alex Getty

Reputation: 1727

Meteor and jQuery: using cursor.observe to trigger jQuery css manipulation

I am using meteor to create a simple data entry and visualization application. When I try to use jQuery to change some of the css for each entry based on the data, I'm running into problems.

I have it set up so that when an entry is added (using cursor.observe) a height value is calculated, then jQuery is used to apply that value the css, but it is not actually doing it. I know that the values are being calculated correctly because I am using the console to display them.

Is this because at the time that this code runs, the actual html for these entries have not yet been built from the template? If this is the case, where can I stick this code so that it runs the jQuery after the html is there?

Below is the code relevant to this problem, any help would be appreciated.

Template.mainPanel.Actions = function(){
    var actions = Actions.find()

    actions.observe({
        added: function(action){
            var entryHeight = action.Duration

            console.log("entryHeight: " + entryHeight)

            $('#vis' + action.ID).css({'height':entryHeight})
        }
    })

    return actions
}

Upvotes: 0

Views: 233

Answers (1)

Naomi Seyfer
Naomi Seyfer

Reputation: 494

I'm assuming you have some code in your app like:

<template name="mainPanel">
  {{#each Actions}}
    <div id="{{ID}}">Something</div>
  {{/each}}
</template>

That you're pairing up with returning your actions cursor from Template.mainPanel.Actions.

Instead of doing something complicated with an observe, you can include reactive handlebars for the style directly in your HTML, like so:

<template name="mainPanel">
  {{#each Actions}}
    <div id="{{ID}}" style="height: {{Duration}}px">Something</div>
  {{/each}}
</template>

Upvotes: 2

Related Questions