jquery tmplate from a json object

thought I should ask. Are there any tools that would create a jquery tmplate from a given json object.

I realize I'll obviously need to customize the look and feel of the template - but having a boilerplate template that would start me off would be a big help.

thanks
sanagarwlAsked:
Who is Participating?
 
Steve KrileCommented:
Not sure if I'm fully following you, but knockout.js handles converting JSON strings to HTML templates very beautifully.

In my example below, notice that the "template" is really just plain HTML with a data-bind="foreach: modelData" declaration that tells knockout to do it's magic.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="Evan Cutler" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
<title>Knockout Sample</title>
    
    <style type="text/css">
        body {font-family:Arial;}
        
    </style>
    <script type="text/javascript">
        var sampleJSONData = '[{"color": "Red", "size": "Large"}, {"color": "Blue", "size": "Large"}, {"color": "Pink", "size": "Medium"}]';

       
        //knockout uses a single object to hold all the model elements
        var pageModel = {};
        var modelData = ko.observableArray($.parseJSON(sampleJSONData));


        $(document).ready(function () {
            //wait until the page loads and apply the binding.
            ko.applyBindings(pageModel);
        });
        
    </script>
    
</head>

<body>


    <h1>Data Template</h1>
    <table>
        <thead>
            <tr>
                <th>Color</th>
                <th>Size</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: modelData">
            <tr>
                <td data-bind="text:color"></td>
                <td data-bind="text:size"></td>
            </tr>
        </tbody>
    </table>

    
</body>
</html>

Open in new window

0
 
Chris StanyonCommented:
Not sure what you mean by jQuery templates!

A json object is a string representation of data!

Can you explain more about what you mean or what you're trying to achieve
0
 
sanagarwlAuthor Commented:
by jquery templates I meant http://api.jquery.com/category/plugins/templates/

I realise Json is a string representation. And, I have been using Json with ExtJs as well as JQuery and I have used templates.

I was just getting a little lazy and was hoping there was  a tool that could take a Json representation and transparently create a tmplate to render html.

And, I could then customize the tmplate to get the desired result....
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Chris StanyonCommented:
Right. The plugin you're talking about has never got, nor ever will get past beta. It's been abandoned by the jQuery team, so I wouldn't rely on it too much.

Sorry. Can't be of any more help
0
 
sanagarwlAuthor Commented:
thanks Guys,

Sorry I was not clearer, since we are using jquery I'll need to use jQuery tmplates or the newer avatar jsRender. If I continue to use jQuery tmplates, I was looking for a tool that at design time could create a tmplate file on the fly based on a given json.

I could then customize this given tmplate - apply styles etc.

Thanks for telling me about knockout - I plan on looking at that as well as backbone.js.
0
 
Steve KrileCommented:
Both are excellent, well supported, and widely used.  I'm elbow-deep into Knockout, so that's my preference, but I hear really good things about backbone.

As for styling, yeah, knockout's got that.  ;)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.