CODEWITHSUNDEEP
javascriptcomponents
ŁukaszBachman
ŁukaszBachman

Reputation: 33735

Could you recommend some elegant way of creating reusable components with JavaScript and jQuery?

I would like to have a set of nice tools in JavaScript for creating a small, reusable components easily. Component builder should have some nice API to create an html output for given data, which can be embedded directly on website. An example would be:

var data = smth; // some data, probably JSON ...
var builder = new Builder();
$(container).html( builder.build('user_details_template').with(data) );

This could render, for instance:

<div>
   <h1>User details</h1>
   <span class="username">Aaron Rodgers</span>
   <span class="description">Best QB in the entire world</span>
</div>

Pardon subjective example.

Now, is there some neat way in JavaScript to build such tool? In Java I would build or use some template engine which could accept arbitrary data and render HTML output.

I'm not a JavaScript expert, so the only tools I can think of are string concatenation and regular expressions.

But what are the best practices to do that in JavaScript?

Upvotes: 1

Views: 2038

Answers (2)

lukestevo
lukestevo

Reputation: 421

Check out the examples of the google closure template library. Usage is expressed in a very similar way to your example.

https://developers.google.com/closure/templates/docs/helloworld_js

Upvotes: 0

Jamie
Jamie

Reputation: 3372

A template system in jquery ui is in planning phase: http://api.jquery.com/template/. However there exist alternative libraries like Mustache

Upvotes: 3

Related Questions