Question

for example:

I have created one javascript property array model with some properties like Name, start, director, year as per below:

model = {}
  model.Name = [];
  model.Stars = [];
  model.Director = [];
  model.Year = [];

then i added some data in model using push method for example at runtime

Name="DDLJ"
Stars="SRK"
Director="Yashraj"
Year="1998"

Name="K3G"
Stars="SRK"
Director="Karan"
Year="2004"


Name="KKHH"
Stars="SRK"
Director="Karan"
Year="2000"

So i want to show this all info of model array object to html table using jquery template,
but I don’t know how do it?

i tred by using {{each}} {{/each}} but it only shows one property data at a time then next
like….

{{each Name}} ${{$Value}} {{/each}}

{{each stars}} ${{$Value}} {{/each}}

Please solve this issue and help me…

Answer 1

The model should be like this (an array of objects, not an object with multiple arrays):

var model = [];
model.push( { Name: "DDLJ", Stars: "SRK", Director: "Yashraj", Year: 1998 } );
// etc

Then you should be able to write something like this for the template:

<script id="modelTemplate" type="text/x-jquery-tmpl"> 
        <tr> 
            <td>${$Name}</td>
            <td>${$Stars}</td>
            <td>${$Director}</td>
            <td>${$Year}</td>
        </tr> 
</script>

<table id="modelTable"><table>

And then to render the template:

$("#modelTemplate").tmpl(model).appendTo($("#modelTable");