71104 / jquery-handlebars

A jQuery plugin to render Handlebars.js templates into elements
http://71104.github.io/jquery-handlebars
MIT License
100 stars 39 forks source link

Clarification on use #8

Closed angelxmoreno closed 10 years ago

angelxmoreno commented 10 years ago

Is this how I am supposed to use the function?

<div id="placeholder"></div>

<script id="snippet" type="text/x-handlebars-template">
<div>
    <p>Hello there {{dude.name}}!</p>
    <p>Heard your favorite movie was {{dude.movie}}</p>
</div>

</script>

$(document).ready(function () {
    var dude = {movie:'Le Matrix',name:'Le Neno'};
    $('#placeholder').render('snippet', dude);    
});

The end result I am expecting is

<div id="placeholder">
    <div>
        <p>Hello there Le Neo!</p>
        <p>Heard your favorite movie was Le Matrix</p>
    </div>
</div>
71104 commented 10 years ago

In order for your code to function there must be a "snippet.handlebars" file containing the template:

<div>
    <p>Hello there {{dude.name}}</p>
    <p>Heard your favorite movie was {{dude.movie}}</p>
</div>

Then, in the main page, you can do:

<html>
...
<body>
    <div id="placeholder"></div>
    <script>
$(function () {
    var dude = {movie:'Le Matrix',name:'Le Neno'};
    $('#placeholder').render('snippet', dude);
});
    </script>
</body>
</html>
71104 commented 10 years ago

@angelxmoreno I see right now what you tried to do there.

Sorry but inline templates in the page are not supported yet, you need to write all your templates as separate files. Everything is explained in the main project page: http://71104.github.io/jquery-handlebars/

angelxmoreno commented 10 years ago

Would be nice to support inline templates but I see how calling what i need only when I need it would decrease load time. Let's point that out in the readme to clarify since it could be assumed that the plugin should handle inline templates.