How many ways are there to maintain handlebars template in client side

Question

In my application we are templating handlebars from client side(we are not templating from server side).So till now we used maintaining all templated inside of the html file using script tag like in the following way.

 <script id="selectdropdownTpl_mobile" type="text/x-handlebars-template">
        <option value="{{optValue}}" label="{{name}}">{{name}}</option>
</script>

Whenever I want template, I am just compiling and appending compiled result to dom just like following way

var alertCompilation= Handlebars.compile(document.getElementById("selectdropdownTpl_mobile").innerHTML)
alertCompilation({"optValue":"test","name":"firstApp});

Working fine,but what we are thinking to separate all handlebar templates into another file.so it's easy to maintain html file.

Regarding this,I thinking to move all the templates into .js file inside of the file just creating global variable,it is object in the following way.

 //fileName test.js
 var templates={
    "selectdropdownTpl_mobile":"template code"
 }

whenever I want, I can access template code like in the following way.

 var alertCompilation= Handlebars.compile(templates["selectdropdownTpl_mobile"]);
alertCompilation({"optValue":"test","name":"firstApp});

This way also working fine,What I want to know is this good way or not.If it is not good way How shell do this.

I heard about .hbs file, basically it contains pre-compiler template.It's usefull If I template from server side but in my case templating happening in client side itself.

can anyone suggest me,which way is better.