Meteor: How to set a radio button’s value depending on the value in the Database

Question

Admins of a site can create new academic publications (eg: published paper ( pp ) or book chapter ( bc )). The type of the publication is determined by radio buttons. There are four different types.

Problem: Admins might also edit an already existing entry in a later stage. To make this possible, I need to retrieve the value of type and pass it over to the template.html to make the correct radio button preselected.

How is this possible? Any help appreciated.

This is the JSON with a type field from the collection Publications :

{
    "_id" : "t4Zc23YSB9fJc8rW4",
    "authors" : [ 
        {
            "lastName" : "Whittington",
            "firstName" : "Richard"
        }, 
        {
            "lastName" : "Cailluet",
            "firstName" : "Ludovic "
        }, 
        {
            "lastName" : "Douglas",
            "firstName" : "Basak Yakis "
        }
    ],
    "title" : "Opening strategy: Evolution of a precarious profession",
    "outlet" : "British Journal of Management, 22 (3)",
    "year" : "2011",
    "abstract" : "No Abstract ...",
    "type" : "pp"
}

The helper.js:

Template.adminPublicationsEdit.helpers({
  pubEntry: function () {
    return Publications.findOne({_id: this._id});
  }
});

And template.html:

<template name="adminPublicationsEdit">
    <div class="container extra-spacing-bottom">
    <div class="putdown extra-spacing-bottom">
            <h1 class="extra-spacing-bottom">EDIT ENTRY</h1>
            <hr>
      {{#with pubEntry}}
      <form class="form-horizontal" id="addPub" role="form">
        <div class="form-group">
            <label for="title" class="col-sm-2 control-label">Title</label>
          <div class="col-sm-10">
              <input type="text" class="form-control" id="title" name="title" value="{{title}}" placeholder="Enter Title">
            </div>
        </div>

        <div class="form-group">
            <label for="year" class="col-sm-2 control-label">Year</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="year" name="year" value="{{year}}" placeholder="Enter Year of Publication">
            </div>
        </div>

       <div class="form-group">
          <label for="abstract" class="col-sm-2 control-label">Abstract</label>
          <div class="col-sm-10">
          <div name="abstract" id="abstract">
            {{{abstract}}}
          </div>
          </div>
      </div>

            <div class="form-group js-radios">
                <label for="Outlet" class="col-sm-2 control-label">Outlet</label>
                <div class="col-sm-10">
                    <label class="radio-inline"><input type="radio" name="outlet-type" id="wp" value="wp">Working Paper</label>
                    <label class="radio-inline"><input type="radio" name="outlet-type" id="pp" value="pp">Published Paper</label>
                    <label class="radio-inline"><input type="radio" name="outlet-type" id="bk" value="bk">Book</label>
                    <label class="radio-inline"><input type="radio" name="outlet-type" id="bc" value="bc">Book Chapter</label>
                </div>
            </div>

              {{#if ppSelected}}
               <div class="form-group">
                  <label for="journal" class="col-sm-2 control-label">Journal</label>
                  <div class="col-sm-10">
                      <input type="text" class="form-control" id="journal" name="journal" placeholder="Enter Name of Journal">
                  </div>
              </div>

              <div class="form-group">
                  <label for="pages" class="col-sm-2 control-label">Pages</label>
                  <div class="col-sm-10">
                      <input type="text" class="form-control" id="pages" name="pages" placeholder="Enter Pages">
                  </div>
              </div>
              {{/if}}

            {{#if bkSelected}}
             <div class="form-group">
                <label for="publisher" class="col-sm-2 control-label">Publisher</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="publisher" name="publisher" placeholder="Enter Publisher">
                </div>
            </div>

            <div class="form-group">
                <label for="location" class="col-sm-2 control-label">Location of Publisher</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="location" name="location" placeholder="Enter Location of Publisher">
                </div>
            </div>
            {{/if}}

            {{#if bcSelected}}
             <div class="form-group">
              <label for="publisher" class="col-sm-2 control-label">Publisher</label>
              <div class="col-sm-10">
                  <input type="text" class="form-control" id="publisher" name="publisher" placeholder="Enter Publisher">
              </div>
            </div>

            <div class="form-group">
              <label for="location" class="col-sm-2 control-label">Location of Publisher</label>
              <div class="col-sm-10">
                  <input type="text" class="form-control" id="location" name="location" placeholder="Enter Location of Publisher">
              </div>
            </div>

             <div class="form-group">
                <label for="editors" class="col-sm-2 control-label">Editor(s)</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="editors" id="firstEditor"  placeholder="Enter Book Editor(s)">
                </div>
              </div>


            <div class="form-group">
              <label for="pages" class="col-sm-2 control-label">Pages</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="pages" name="pages" value="{{pages}}">
              </div>
            </div>
            {{/if}}

            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" id="js-addEntry" class="btn btn-primary admin-button">UPDATE ENTRY</button>
              </div>
            </div>

          </form> <!-- end form -->

      {{/with}}
    </div> <!-- putdown -->
  </div> <!-- container -->
</template>

Answer 1

If I understood your question, you want to select a particular radio button inside your Outlet form-group which corresponds with the type 's value of the pubEntry 's object. If this is the case, you could implement a Meteor helper and pass the type as a function argument.

For example:

if (Meteor.isClient) {
  Template.adminPublicationsEdit.helpers({
    // ...
    isChecked: function(type) {
      return (this.type === type) ? "checked" : "";
    }
    // ...
  });
}

---

<template name="adminPublicationsEdit">
  <!-- ... -->
  <div class="form-group js-radios">
    <label for="Outlet" class="col-sm-2 control-label">Outlet</label>
    <div class="col-sm-10">
      <label class="radio-inline">
        <input type="radio" name="outlet-type" id="wp" value="wp" {{isChecked 'wp'}}>Working Paper</label>
      <label class="radio-inline">
        <input type="radio" name="outlet-type" id="pp" value="pp" {{isChecked 'pp'}}>Published Paper</label>
      <label class="radio-inline">
        <input type="radio" name="outlet-type" id="bk" value="bk" {{isChecked 'bk'}}>Book</label>
      <label class="radio-inline">
        <input type="radio" name="outlet-type" id="bc" value="bc" {{isChecked 'bc'}}>Book Chapter</label>
    </div>
  </div>
  <!-- ... -->
</template>