codepb/jquery-template

How to load/bind JSON with nested/aggregated properties?

jhnmrls opened this issue · 6 comments

eq. JSON object

`var input = {"id":"1","name","john", "messages": [{"msg_id":"1","content":"Hello "} , {"msg_id":"2","content":"World"} ] };

$('#messages').loadTemplate("templates/messages.html",input ,{ append:true});`

How can I display "messages" in a loop ?

eq.

`

Hello

World

`

Thanks.

you should just be able to do the following:

$('#messages').loadTemplate("templates/messages.html",input.messages);

You wouldn't need the append setting either, unless there was already content in the container that you didn't want to lose.

@codepb - Thanks! that confirms it.

I was just asking if there's an automated way.

Another question,

given:

`var input = {"id":"1","name","john", "messages": [{"msg_id":"1","content":"Hello "} , {"msg_id":"2","content":"World"} ] };

will it be possible to do only one loadTemplate

$('#messages').loadTemplate("templates/messages.html",**input**);

and display all including the nested in messages.html?

messages.html'

<p data-content="id"><p>
<p data-content="name"><p>
<p data-content="messages"><p>

what "bindings" should i use for "messages" ?

It seems that data-template-bind and data-options are the closest but I tried and it's not working/applicable.

I can't do a double loadTemplate, because the template will be populated during runtime.

If it's not applicable, I'll be doing nasty jquery logic like, load the JSON on a hidden input then reload the page.

@codepb

I was able to solve the nested issue with this:

http://jsfiddle.net/FxYE6/6/

I saw 1 of your answer in your website.

my new question is this:

is there a way to

<div data-content="details" data-format="nestedTemplateFormatter" data-format-options="#listTemplate">

To make data-format-options' template an external file?

eq.

<div data-content="details" data-format="nestedTemplateFormatter" data-format-options="{ template : 'assets/template/list.html'}">

?

Thanks.`

should work like that. If it's not your url might be wrong?

the internal code calls loadTemplate, with the value you passed in for the template as the first parameter:

loadTemplate(template, value, internalSettings);

tested and it's working.. thanks..