javascript - Meteor Select Box - mark option as selected depending on data context -

javascript - Meteor Select Box - mark option as selected depending on data context -

i have been trying figure out how set 'selected' attribute on alternative within select box , have fallen short today. help appreciated.

what i'm trying accomplish: when user chooses alternative , hits submit, info saves new mongo document , new entry shown on screen (this part works). upon browser refresh, state lost (due no selected attribute beingness set) , select box goes first option. need figure out how set selected state depending on value user has saved on particular document. on page there many of same select boxes allowing user take different options other entries.

references (tried implement no luck):

check equality in spacebars?

https://github.com/meteor/meteor/wiki/using-blaze#conditional-attributes-with-no-value-eg-checked-selected

meteor.js - how can indicate 'checked' or 'selected' in templating scheme when using checkboxes , select options?

select box template:

<template name="tedit"> <div class="form-group"> <div class="controls"> {{> ffedit}} </div> </div> </template>

select box alternative template:

<template name="ffedit"> <select class="form-control" name="ffselect"> {{#each ffselect}} <option value="{{fid}}">{{ff}}</option> {{/each}} </select> </template>

setting info context

template.ffedit.helpers({ ffselect: function() { var ffarray = [ { ff: "foo", fid: 0 }, { ff: "bar", fid: 1 }, { ff: "buzz", fid: 2 } ]; homecoming ffarray; } });

if want state persisted across browser refreshes, should able either fetch server or meteor session.

the sec thing you'd need helper selected state. conveniently, meteor makes info context available under this (for each loop, context individual item).

template.useredit.helpers({ userselected: function() { if(this.id === session.get("selecteduserid")) { homecoming "selected"; } } });

this assumes you've set session variable session.set("selecteduserid", user._id).

then in template:

<template name="useredit"> <select class="form-control" name="userselect"> {{#each users}} <option {{userselected}}>{{username}}</option> {{/each}} </select> </template>

(note: selected state can not seen inspecting dom element inspector.)

javascript mongodb meteor meteor-blaze spacebars