title: Filling and selecting a selectbox in mustache JS
body: <p>currently i have the "new item form" for my application. i used mustacheJS for it's template. there are some fields which need data from a database, sent via ajax. like for example, a certain select box.</p>
  
  <pre><code>&lt;select name="customerOrder"&gt;
      {{#order}} &lt;option value="{{id}}"&gt;{{itemName}}&lt;/option&gt; {{/order}}
  &lt;/select&gt;
  </code></pre>
  
  <p>the data to fill this up with items would look like this:</p>
  
  <pre><code>{
      "order": [
          {
              "id":1,
              "itemName":"Meat Lover's Pizza"
          }, //and so on...
      ]
  }
  </code></pre>
  
  <p>works fine until i am about to create the edit form, where, besides the form data to fill the select boxes and check boxes, i now have to mark the form elements as selected. however...</p>
  
  <p>the item data is retrieved on another ajax call, hence another JSON object. i can't necessarily merge because data might be of different structures. i could have tried <a href="https://stackoverflow.com/questions/5518915/how-to-set-a-selected-value-in-a-dropdown-list-using-mustache-js">this approach</a> but this meant that form data and item data would be "one" - i don't want that. i want a clear separation of the tangible data, and the non-tangible data</p>
  
  <p>the item data looks like this basically, but may be nested somewhere in the JSON object:</p>
  
  <pre><code>{
      "customer":"mario",
      "order": 1          --&gt; this item i want selected in the form
      //and so on...
  }
  </code></pre>
  
  <p>if there was only some way to build the form, after that, populate and mark it seamlessly while still  using mustache JS. i don't want to hard code the data with their corresponding form fields.</p>
  
  <p>i heard about runtime rendering and partials, but i can't seem to see how i'd use them for this.</p>