Using knockout JS with jquery mobile

[s.saty...@gmail.com]

Hi all, I am trying to use knockout JS with JQuery Mobile. Below is the code snippet, however unable to get things to work, Some body please tell me what is that i am missing here.

<div data-role="page" id="searchResultsPage" data-theme="b">

    <div data-role="content" data-theme="e">

<div data-role="collapsible" data-collapsed="true" data-iconpos="right" data-bind="template: { name: 'person-template', foreach: people }"></div>

<script type="text/html" id="person-template">

 <h3>

<span class="headerDisplayText">

<p class="searchResultsAuxInfo" data-bind="text: name"></p>

</span>

<span class="headerDisplayTextRight">

<p class="searchResultsAuxInfo" style="width: 60%;" data-bind="text: credits"></p>

</span>

 </h3>

</script>

    </div>

</div>

function MyViewModel() {

     this.people = [

         { name: 'Franklin', credits: 250 },

         { name: 'Mario', credits: 5800 }

     ]

 }

ko.applyBindings(new MyViewModel());

[Diego Guidi]

you don't need to specify the script tag and the   name: 'person-template'  part.

the section inside the "foreach" div is repeated automagically.

try with:

<div data-role="collapsible" data-collapsed="true" data-iconpos="right" data-bind="template: { foreach: people }"></div>

 <h3>

<span class="headerDisplayText">

<p class="searchResultsAuxInfo" data-bind="text: name"></p>

</span>

<span class="headerDisplayTextRight">

<p class="searchResultsAuxInfo" style="width: 60%;" data-bind="text: credits"></p>

</span>

 </h3>