I have a set of 3 radio buttons that I am trying to get set when the page is first rendered:

            <div>
                <div><input id="{{_id}}_undefined" type="radio" name="accepted" {{undecided}}>No Determination</div>
                <div><input id="{{_id}}_true" type="radio" name="accepted" value="true" {{accepted}}>Assign To Researchers</div>
                <div><input id="{{_id}}_false" type="radio" name="accepted" value="false" {{declined}}>Decline</div>
                {{#if declined}}
                <textarea name="declineReason" ></textarea>
                {{/if}}
                <button id="saveChanges" data-research-request-id="{{_id}}">Save Changes</button>
            </div>

with these helpers:

Template.su_researchRequests.helpers({
// This feels so wrong.
accepted: function() {
    return this.accepted === true?'checked':'';
},
declined: function() {
    return this.accepted === false?'checked':'';
},
undecided: function() {
    return this.accepted !== false && this.accepted !==true?'checked':'';
}
});

I have tried returning an object with {'checked':''} or {}

I can't use {{#if}} in meteor like I could in mustaches to block out the checked property.

It can't be that hard to set the present value when rendering a page.

I have a set of 3 radio buttons that I am trying to get set when the page is first rendered:

            <div>
                <div><input id="{{_id}}_undefined" type="radio" name="accepted" {{undecided}}>No Determination</div>
                <div><input id="{{_id}}_true" type="radio" name="accepted" value="true" {{accepted}}>Assign To Researchers</div>
                <div><input id="{{_id}}_false" type="radio" name="accepted" value="false" {{declined}}>Decline</div>
                {{#if declined}}
                <textarea name="declineReason" ></textarea>
                {{/if}}
                <button id="saveChanges" data-research-request-id="{{_id}}">Save Changes</button>
            </div>

with these helpers:

Template.su_researchRequests.helpers({
// This feels so wrong.
accepted: function() {
    return this.accepted === true?'checked':'';
},
declined: function() {
    return this.accepted === false?'checked':'';
},
undecided: function() {
    return this.accepted !== false && this.accepted !==true?'checked':'';
}
});

I have tried returning an object with {'checked':''} or {}

I can't use {{#if}} in meteor like I could in mustaches to block out the checked property.

It can't be that hard to set the present value when rendering a page.

• javascript
• meteor
• spacebars

1 Answer 1

O.k. so it turned out the problem was that the radio inputs did not have a unique enough name.

As soon as I did this:

<div><input id="{{_id}}_undefined" type="radio" name="{{_id}}_accepted" {{undecided}}>No Determination</div>
<div><input id="{{_id}}_true" type="radio" name="{{_id}}_accepted" value="true" {{accepted}}>Assign To Researchers</div>
<div><input id="{{_id}}_false" type="radio" name="{{_id}}_accepted" value="false" {{declined}}>Decline</div>

Life was good