jQueryMobile and JsRender

[samstrat]

I'm using JsRender for a project to parse JSON data into a form. I noticed jQuery Mobile did not render properly unless this code in bold appeared:

var xxx = data.JSONobject,
template = $("#someTemplate").render(xxx);
$("#someID").html(template).**jquerymobileselector("refresh");**

the problem is when I use that and I embed another template using the for statement ( {{for objectItem tmpl='#otherTemplate'/}} ), that bit of the content does not render properly with jQueryMobile.

How would I be able to refresh that bit using this code example?

So, not sure this is an issue, but there's no clear documentation that covers this kind of scenario.

Help is appreciated.

Code snippets: html:

<div data-role="page" id="qaPropertyDetails">
  <div class="ui-content">
  <form>
    <div id="qaHeaderContent" data-inset="true" data-theme="b"></div>
    <div data-role="collapsibleset" data-theme="a" data-content-theme="a" id="qaContentDetails">    </div>
  </form>
</div>

<script id="qaHead" type="text/x-JsRender">
  <h2>Quality Assurance Report</h2>
  <h4>Property: {{:custName}}<br>
</script> 

<script id="qaDetail" type="text/x-JsRender">
  <div data-role="collapsible">
    <h3>{{>qaCatDescription}}</h3>
    {{for qaItem tmpl='#qaItemTemplate'/}}
  </div>
</script>

<script id="qaItemTemplate" type="text/x-JsRender">
  <label for="qai{{:qaiID}}">{{:qaiDescription}}</label>
  <input type="range" name="qai{{:qaiID}}" id="qai{{:qaiID}}"
    data-highlight="true" min="0" max="10" value="5"><hr>
</script>
</div>

javascript:

$(document).on("pagebeforeshow", "#qaPropertyDetails", function () {
 $.getJSON(repoUrl)
    .done(function (data) {
      var qaCategories = data.report.properties[lineNumber].qaCategory,
      template = $("#qaDetail").render(qaCategories);
      $("#qaContentDetails").html(template).collapsibleset("refresh");
});
});

[samstrat]

figured it out