binding object to templates with javascript

Question

I have been playing with jquery and templates, and I cobbled together a simple template binding system:

<script type="text/template" id="Template">
    <div>{0}</div>
</script>

and...

var buffer = '';
var template = $("#Template").html();

response.Data.forEach(function(arrayElement)
{
    buffer += template.format(arrayElement.p1,);
});

$("#ListOutput").html(buffer);

My question is: Is there a more natural way that I can take a JSON object, such as:

{"user": { "id": "1","name": "bob" }}

And use a more natural binding sintax, such a this:

<script type="text/template" id="Template">
    <div>{user.name}</div>
</script>

straight JS or jquery would be idea. I know that some of the more complex data binding tools like Angular provide these features, but the complexity of some of the data binding plugins makes my head swim. Anything based on node is right out.

Is there some native feature I don't know about that makes this easy?

Sanchay Kumar · Accepted Answer · 2017-02-16 09:23:21Z

2

If you can use ES2015 "template strings".

<script type="text/template" id="Template">
    <div>${user.name}</div>
</script>

You have not added response array, so I am assuming it as

[
 {"user": { "id": "1","name": "bob" }},
 {"user": { "id": "2","name": "Some Name" }}
]

var buffer = '';
var template = $("#Template").html();
response.Data.forEach(function(arrayElement) {
    var user = arrayElement.user;
    buffer += eval('`' + template + '`');
});

$("#ListOutput").html(buffer);

answered Feb 16, 2017 at 9:23

Sanchay Kumar

5665 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

binding object to templates with javascript

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related