Question

My Templates:

        <script id="tmp_servicebuttons" class="template" type="text/x-jquery-tmpl">
            <li><a class="notification" href="${id}"><img src="${imgsrc}"/></a></li>
        </script>
    <script id="tmp_navigation" class="template" type="text/x-jquery-tmpl"> 
        <header>
            <nav>
                <ul class="top_bar_notifications">
                    <li>
                        <a href="#home" class="go home">
                            <img src="./resources/img/homebtn.png" alt="Home">
                        </a>
                    </li>

                    <li>
                        <a href="#" class="back">
                            <img src="./resources/img/backbtn.png" alt="Home">
                        </a>
                    </li>
                </ul>
            </nav>
...

My Home page:

    <!-- First Page after splash with main buttons -->
    <script id="tmp_home" class="template" type="text/x-jquery-tmpl">   
        <section id="${$item.panel_id}" class="home category panel">

            {{tmpl "#tmp_navigation"}}
...

How I am trying to append:

var data = [{"id": "1", "imgsrc": "./resources/img/servicebtn.png"}];
$("#tmp_servicebuttons").tmpl(data).appendTo(".top_bar_notifications");

When I do the following, my navigation template seems to only update on certain sections. I have four sections total. It will update two of the four templates and my home template for some reason is not affected. Anyone know why this would work for one section but not the others? Thanks!

Answer 1

It turned out I was trying to insert html data into my template. That HTML was being interpreted as text. I ended up creating a new template for the LIs and then appended the tmpl to the UL.
Created a template:

  <script id="tmp_servicebuttons" class="template" type="text/x-jquery-tmpl">
        <li><a class="notification" href="${id}"><img src="${imgsrc}"/></a></li>
  </script>

then appended the populated data to the UL

var data = JSON.parse(buttons);
$(data).each(function(){
    var data = [{"id": this.id, "imgsrc": this.imgsrc}];
    $("#tmp_servicebuttons").tmpl(data).appendTo(".top_bar_notifications");
});