handlebars dynamic update partial only

Viewed 1057

I work in a Phonegap project, with Handlebars, and can't find an answer for this.

I have a template like this (stripped)

<script id="autocomplete_tpl" type="text/x-handlebars-template">
    <section class="content">
     ......
     <input type="text" id="input_autocomplete">
     ......
     <div id="autocomplete_list_wrapper">
          {{> autocomplete_list}}|
     </div>
     ......
</script>

<script id="autocomplete_list" type="text/x-handlebars-template">
<ul>
{{#each listing}}
     <li>{{id}} {{name}}</li>
{{/each}}
</ul>

What I try to accomplish is to set up a list in the partial, filled by the response of the request. Like an autocomplete.

So, when the user does change/blur the input[type="text"], autofill #autocomplete_list_wrapper with the response(json) of the request.

But is there a way, only to update the handlebars partial, instead of the whole template. (so the input does not overwrite etc)

Thanks in advance!

Answer

Ok, A new clear fresh day helped a lot

request(function(data){
    var list_partial = Handlebars.partials["autocomplete_list"];
    $view.find('#autocomplete_list_wrapper').html(list_partial(data));
}
0 Answers
Related