Picker - can I use it in template?

Questions
1

I have a written a simple survey app, where a list of people fill out a form. Works fine with a template that only has check box fields, but I need a picker in the template, so each person can select their answer from a global list

I can’t wrap my head around how to add a picker used in a template. Is it possible? I couldn’t find any examples.

Thanks.

G.

2

What do you mean template? Template7 template for page? It must be then initialized on this page

3

I have a working response picker on a regular page that I would like to see inside each contact on the template7 view.

I can’t figure out how to code the responsePicker = myApp.picker.create() for template use.

Any examples would be great.

Thanks.

G.

responsePicker = myApp.picker.create({
rotateEffect: true,
formatValue: function (values, displayValues) {
  console.log('formatValue:: ', values);
  console.log('displayValues:: ', displayValues);
  return displayValues[0];
},
inputEl: '#picker-response',
toolbarCloseText: 'Select',
cols: [
  {
    textAlign: 'center',
    values: allowedResponsesArray,
    displayValues: allowedResponsesArray,
    onChange: function (picker, value) {
      selectedResponse = value;
      console.log('Selected:->', selectedResponse);
    }
  }
]
  });


<script id="contact-template-test" type="text/template7"></script>
<div class="contact">
  <ul>
    {{#each Contacts}}
    <li>
      <div class="item-inner no-padding">
        <div class="card contact-card">
          <form id="{{Id}}">
            <div class="card-header contact-card-header">
              <input name="contact_name" class="contact-name" type="text" disabled="true" value="{{Name}}"></input>
            </div>
            <div class="card-content">

              <div class="item-content">
                <span class="Phone">{{Phone}}</span>
              </div>

              <div class="list">
                <ul>
                  <li>
                    <div class="item-content item-input">
                      <div class="item-inner">
                        <div class="item-input-wrap">
                          <input placeholder="Select Response" readonly="readonly" id="picker-response" class="input-with-value" type="text"></input>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
  
              <div class="item-content">
                <div class="item-inner">
                  <label class="item-checkbox item-content">
                    <input name="attend_checkbox" type="checkbox"></input>
                    <i class="icon icon-checkbox"></i>
                    <div class="item-title">Attended</div>
                  </label>
                  <a href="#" onClick="formSave('#{{Id}}')" class="button button-round save">Save</a>
                </div>
              </div>

            </div>
          </form>
        </div>
      </div>
    </li>
    {{/each}}
  </ul>
</div>
</script>