I have a very basic question. How do you use Handlebars.registerPartial using Javascript only? I have seen on many sites how to use it with JQuery, but I unfortunately can't use JQuery.

This is example of what I have seen:

Handlebars.registerPartial("person", $("#person-partial").html());

But the $("#person-partial").html() is JQuery

I have a very basic question. How do you use Handlebars.registerPartial using Javascript only? I have seen on many sites how to use it with JQuery, but I unfortunately can't use JQuery.

This is example of what I have seen:

Handlebars.registerPartial("person", $("#person-partial").html());

But the $("#person-partial").html() is JQuery

• javascript
• handlebars.js

Share Follow edited Aug 21, 2014 at 16:06 user3499265 asked Aug 21, 2014 at 16:00 user3499265user3499265 9722 silver badges1010 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Second argument Handlebars.registerPartial() is string containing the template. You dont need jquery for that. I know that you are refering to this tutorial and it uses jquery in its examples.

Using same example code you can do it using document.getElementById and .innerHTML like following

<script id="people-template" type="text/x-handlebars-template">
  {{#each people}}
    {{> person}}
  {{/each}}
</script>

<script id="person-partial" type="text/x-handlebars-template">
  <div class="person">
    <h2>{{first_name}} {{last_name}}</h2>
    <div class="phone">{{phone}}</div>
    <div class="email"><a href="mailto:{{email}}">{{email}}</a></div>
    <div class="since">User since {{member_since}}</div>
  </div>
</script>

<script type="text/javascript">
  $(document).ready(function() {
    var template = Handlebars.pile($("#people-template").html());
    Handlebars.registerPartial("person", document.getElementById("person-partial").innerHTML);

    template(yourData);
  }
</script>