lacco
lacco

Reputation: 892

Meteor: Preselected options lost after rerendering multiple select

I have a multiple select with a Handlebar template in Meteor.js. On first rendering, everything is fine ("Politics" and "People" are preselected as expected):

Multiple select on first render

As soon as the template has to be rerendered (because a Session variable changes, e.g. Session.set("foo", "Hello World!")), the third option is not preselected anymore:

Multiple select after dynamic changes

My setup:

<template name="select">
  <select name="foo" multiple>
    <option value="1">Tech</option>
    <option value="2" selected>Politics</option>
    <option value="3" selected>People</option>
  </select>
</template>

<template name="test">
  {{foo}}
  {{> select}}
</template>

{{> test}}
Template.test.helpers(
  foo: ->
    Session.get("foo")
)

Do you have any idea why the options are preselected anymore after rerendering?

Upvotes: 2

Views: 464

Answers (2)

Kuba Wyrobek
Kuba Wyrobek

Reputation: 5273

Solution is:

<template name="test">
  {{#isolate}}
    {{foo}}
  {{/isolate}}      
  {{> select}}
</template>

Typically, the exact extent of re-rendering is not crucial, but if you want more control, such as for performance reasons, you can use the {{#isolate}}...{{/isolate}} helper. Data dependencies established inside an #isolate block are localized to the block and will not in themselves cause the parent template to be re-rendered. This block helper essentially conveys the reactivity benefits you would get by pulling the content out into a new sub-template.

If you put {{foo}} inside {{#isolate}} ... {{/isolate}} then parent template won't be rerendered, so also {{> select}} won't be affected.

Upvotes: 1

Sivli
Sivli

Reputation: 195

So I am not sure why you are loosing the multiple select but I can recommend you put an {{#isolate}} tag around your{{> select}} template. That should keep the template from re-rendered. Though it will not help if your select template re-renders because its data changes. Hope that helps...

Upvotes: 0

Related Questions