JSRender leaves fields blank

Question

I'm having trouble rendering out a template, my data looks like this:

var data = {"addresses":
                [{"Title":null,
                  "Name":null,
                  "Address1":"Add 1.1",
                  "Address2":"Add = 2.1",
                  "Town":"Town1",
                  "County":"County 1",
                  "Country":"United Kingdom",
                  "Postcode":"CV10 1RH",
                  "CountryId":229},
                 {"Title":null,
                  "Name":null,
                  "Address1":"Add 1.2",
                  "Address2":"Add = 2.2",
                  "Town":"Town2",
                  "County":"Count 2",
                  "Country":"United Kingdom",
                  "Postcode":"CV10 2RH",
                  "CountryId":229}
                 ]};

And my template is stored in the javascript and rendered like this:

var defaultAdressSelectorTemplate = '<label for="addressSelector">Select Adress:</label><select id="addressSelector" name="addressSelector">{{#each addresses}}<option>{{>Address1}}</option>{{#/each}}</select>';          

$.templates({ addressTemplate: defaultAdressSelectorTemplate });

html = $.render.addressTemplate( data );

The problem I'm having is that the {{>Address1}} always renders empty. What am I doing wrong?

Answer 1

Using the latest JSRender you want to use {{for}}

var defaultAdressSelectorTemplate = '<label for="addressSelector">Select Adress:</label><select id="addressSelector" name="addressSelector">{{for addresses}}<option>{{>Address1}}</option>{{/for}}</select>';

jsfiddle example