modify handlebars template with javascript/jquery

Question

I have a handlebars template such as this

<script type="text/html" id="some-id">
  <div class="some-class-1" {{#if some_condition}}style="color:blue;"{{/if}}>
  </div>
  <div class="some-class-2">
    <div class="some-nested-class-1">
    </div>
  </div>
  <div class="some-class-3">
  </div>
</script>

I want to modify this template for example add another div after div.some-nested-class-1

I used the following code, to parse the template to dom

jQuery(function ($) {
  var t = $("#some-id");
  var d = $("<div>").html(t.html());
  console.log(d.html()); 
});

but it changes {{#if}} as follows :

  <div class="some-class-1" {{#if="" some_condition}}style="color:blue;" {{="" if}}="">
  </div>
  <div class="some-class-2">
    <div class="some-nested-class-1">
    </div>
  </div>
  <div class="some-class-3">
  </div>

Using Chrome and jsfiddle here https://jsfiddle.net/wv7hzx5a/

How can I achieve this without affecting the template?

Many thanks

PS: the template is being compiled in a separate script which I do not have access to change. I want to modify the template so that when the other script compiles it, the new elements will be included.

Answer 1

I don"t understand what you're trying to to and what you mean by parse the template to DOM. If you want to process the template and replace the handlebar code to have html, then use handlebar to do it and not jQuery. Only handlebar can interpret and translate the handlebar instructions to have the result. Then once that you have your result you can display it with jQuery if you want. Here is one example :

var context = {
  "mydata": [
    {
      "character-id": "Luke1",
      "firstname": "Luke",
      "name": "Skywalker",
      "age": "20",
      "rebel": true
    }, 
    {
      "character-id": "Leia1",
      "firstname": "Leia",
      "name": "Organa",
      "age": "20",
      "rebel": true
    },
    {
      "character-id": "Vader1",
      "firstname": "Darth",
      "name": "Vader",
      "age": "45",
      "rebel": false
    }
  ]
} 

// Here you process the template and put it in the DOM
var template = $('#handlebars-demo').html();
var templateScript = Handlebars.compile(template);
var html = templateScript(context);
$("#placeholder").append(html);

// Once you have inserted your code in the DOM you can now use jQuery to modify it
// For example I put a star after Leia's section
$("#Leia1").html($("#Leia1").html()+"*")
</script>

.some-class-1 {
  padding: 10;
  min-width: 10px;
  min-height: 20px;
  border: solid blue 1px;
}

.some-class-2 {
  padding: 10;
  min-width: 10px;
  min-height: 20px;
  border: solid black 1px;
}

.some-class-3 {
  padding: 10;
  min-width: 10px;
  min-height: 20px;
  border: solid green 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
<script type="text/html" id="handlebars-demo">
  {{#each mydata}}
    <div id="{{character-id}}">
      <div class="some-class-1" {{#if rebel}}style="color:blue;"{{/if}}>
        {{firstname}}
      </div>
      <div class="some-class-2" {{#if rebel}}style="color:blue;"{{/if}}>
        {{name}}
      </div>
      <div class="some-class-3">
        <div class="some-nested-class-1">
          {{age}}
        </div>
      </div>
    </div>
    <br/>
  {{/each}}
</script>

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