CODEWITHSUNDEEP
phpjavascriptjqueryhtmltemplates
Marty
Marty

Reputation: 39456

Best way to go about templating dynamically loaded content via AJAX?

In an application where content is loaded via AJAX (let's use Blog Posts as an example), what is the most appropriate way to go about getting the loaded content loaded into a HTML template before it is added to the DOM?

For example, I might create a simple JSON feed of my posts, like this:

[
    {
        "id": 1,
        "title": "Title 1",
        "time": "2nd August 2013",
        "content": "Post content here."
    },
    ...etc
]

And the template I want to use to represent a post:

<li data-id="{{id}}">
    <h3>{{title}}</h3>
    <small>{{time}}</small>
    {{content}}
</li>

Couple methods I have used before are:

  1. Create a .php file with its content-type set to application/javascript and include it as a script on the page. Use PHP to read all the HTML files in a directory and compress their content. Store the content as strings in a global object called something like HTML, where the keys are the name of the HTML files. The templates are then accessible for example via HTML["post.html"]. When loading the posts, use JavaScript to replace the tokens in the globally accessible HTML strings with the post content.

    Pros: All the template HTML is ready to use at application startup.
    Cons: Seems messy. If there are many templates, the included file as JavaScript will be large. I don't like the idea of HTML being stored in JavaScript.

  2. Update the JSON feed to include a html field, storing the full HTML for that post (with the post content already injected into the template).

    Pros: The HTML will only be loaded on demand, rather than at startup as in step 1. Processing is not required by JavaScript to update the template.
    Cons: The JSON becomes much larger. Feels odd to have anything other than purely post-related data used in a JSON feed. Repetition of the same HTML for each post, which is unnecessary.

Not sure if there is a more obvious nicer way to do this. If there is, I'd like to know about it. Ideally, the templates will be stored as separate HTML files and only loaded on demand.

Upvotes: 2

Views: 900

Answers (2)

BigToach
BigToach

Reputation: 580

It somewhat depends on the complexity of your application. I would lean more on the side of your first solution. I typically store the template the same way I would store any other view of the application. I then include that file in my application in a block and grab it programatically.

If you have a more complex application I would suggest returning the template along with your JSON data and make javascript parse the JSON data along with the template provided. Ex:

{
    "data": [
        {
            "id": 1,
            "title": "Title 1",
            "time": "2nd August 2013",
            "content": "Post content here."
        },
        ...etc
    ],
    "template": "<li data-id=\"{{id}}\"><h3>{{title}}</h3><small>{{time}}</small>{{content}}</li>"
}

Upvotes: 0

klkvsk
klkvsk

Reputation: 670

You could use a <script> tag with custom type attribute to store your templates.

<script type="text/template" id="template_post">
    <li data-id="{{id}}">
        <h3>{{title}}</h3>
        <small>{{time}}</small>
    {{content}}
    </li>
</script>

And then simply fetch it with $('#template_post').html().

It's valid, a lot of JS frameworks do templating this way. Demo: http://jsfiddle.net/WAJmW/

Upvotes: 2

Related Questions