CODEWITHSUNDEEP
meteor
Loren
Loren

Reputation: 14896

How can I make template data dynamic/reactive?

When I change template data in a helper, the template doesn't change:

{{#each items}}
  {{> item disabled=""}}
{{/each}}

<template name="item">
  <button id='disable'>Disable other button</button>
  <button disabled="{{disabled}}">Sometimes disabled</button>
</template>

Template.item.events
  'click #disable': ->
    this.disabled = 'disabled'

I've also tried: 

Template.item.events
  'click #disable': (e, tmpl) ->
    tmpl.disabled = 'disabled'

Template.item.helpers
  disabled: ->
    Template.instance().disabled

I could make it work using a bunch of global Session variables, but I'm hoping there is a better pattern?

Template.item.events
  'click #disable': ->
    Session.set 'item-' + this._id, 'disabled'

Template.item.helpers
  disabled: ->
    Session.get 'item-' + this._id

Upvotes: 1

Views: 898

Answers (1)

David Weldon
David Weldon

Reputation: 64342

The problem is that setting a non-reactive variable won't cause the template helper to rerun. You can fix this by attaching a ReactiveVar to your template instance like so:

Template.item.created = ->
  @isDisabled = new ReactiveVar false

Template.item.events
  'click #disable': (e, template) ->
    template.isDisabled.set (not template.isDisabled.get())

Template.item.helpers
  isDisabled: ->
    Template.instance().isDisabled.get()

And then your template could look like:

{{#each items}}
  {{> item}}
{{/each}}

<template name="item">
  <button id='disable'>Disable other button</button>
  <button disabled={{isDisabled}}>Sometimes disabled</button>
</template>

Note you will need to meteor add reactive-var for this to work.

I cover this topic in more detail in this post.

Upvotes: 4

Related Questions