CODEWITHSUNDEEP
javascripttemplates
gphilip
gphilip

Reputation: 706

JS templating engine that preserves elements

I have the following problem:

A have a web application where I regularly need to update the user interface when data changes. The data consists of a list of items with different attributes. Because the UI representations of these items can be complex, I use JS templating to render them. When they change I just replace them in the DOM with the HTML representing their updated state.

This approach is simple but has several problems:

So I was wondering if there is any JS templating engine of that many that can deal with the situation. I'm thinking of a feature that intelligently matches elements of the new render and an old one and only changes the content when it has really changed.

I'm thinking of something like this:

Old HTML

<div>
    <h1>TV</h1>
    <span>$250</span>
    <a href="addtocart?id=123">Add to cart</a>
</div>

New HTML

<div>
    <h1>TV</h1>
    <span>$260</span>
    <a href="addtocart?id=123">Add to cart</a>
</div>

The templating engine find the <span> in the original DOM and replaces its changed value but leaves the rest of the elements intact.

Upvotes: 0

Views: 78

Answers (2)

gphilip
gphilip

Reputation: 706

Finally I came across Rivets.js which a lightweight, highly extensible JavaScript templating engine with real time data binding. I love it so far, it's exactly what I needed.

Upvotes: 1

Brad Huang
Brad Huang

Reputation: 85

you can try the AngularJS

A simple example:http://jsbin.com/opayuf/4/edit

you can check out these examples if they can meet your requirements http://tutorialzine.com/2013/08/learn-angularjs-5-examples/

HandleBarsJs may be the one you need, you could see the discussion on
Handlebars.js: Use a partial like it was a normal, full template

You can also try Ember js based on HandlerBarsJs, you can check is out http://emberjs.com/guides/templates/handlebars-basics/

http://emberjs.com/guides/templates/rendering-with-helpers/

Upvotes: 0

Related Questions