1

I've create program that use handlebars to generate some content in HTML file ,currently the content is hard coded and now I want to send some parameters, when I put pass the data from the model like following

that.model = {
func: "Jhon"

};

This is the related handlebar

user.test( {{func}}, function( ) 
{

});

The HTML file which is generated OK and I got in the HTML file

 ...
 user.test( jhon, function( ) 
    {

    });

Now I want to generate it many times according to the array for different users names How should I do that ? I've created the following array

        var userList = {
            user: []
        };

        for (var i = 0; i < selectedUser.length; i++) {
            userList.user.push({
                name: selectedUser[i].getText()
            });
        }

and this is the template

 {{#each userList.user}}
    user.test( {{name}}, function( ) 
    {

    });
  {{/each}}

After the generation process I got which I not what I expected... first It doesnt duplicate the entries and put [object Object]

user.test( [object Object],[object Object], function( ) 
{

});

Assume that I've more than one user like jhon,mike,peter

I want that the generated HTML file look like following after generation: Example user.test( jhon, function( ) {

});

user.test( mike, function( ) 
{

});

user.test( peter, function( ) 
{

});

UPDATE

I've change my object to

for (var i = 0; i < selectedUser.length; i++) {
        userList.user.push({
        selectedUser[i].getText()
        });
    }

And now I'm getting

   user.test( jhon,mike,peter function( ) 
    {

    });

without the iteration ,I want to get it 3 times like in the example...how I use handlebar 1.3 or maybe there is other way to create loop.

  • Could you also show the rest of the code that goes into making this, the call to handlebars with the data and the code of selectedUser. Even better if you could produce a fiddle – Quince Nov 06 '14 at 11:51
  • 1
    is userList part of another object that is passed to the template or is it the root? – Quince Nov 06 '14 at 11:54
  • @Quince-this is the object root,I've move it exactly like in the post Btw thanks for the support! –  Nov 06 '14 at 11:57
  • if its the root should the each not be {{#each user}} – Quince Nov 06 '14 at 12:00
  • @Quince-This is the first time that I use the handlebars so Im not sure if the code is ok for the template.since for example if I have 3 items in the array I expect that I will generate it for 3 times ,but only one is generated and I use #each userList.user... –  Nov 06 '14 at 12:00
  • so {{#each user}} didn;t work? try logging within the template the value of `this` to see what you have access to - link here to answer on how to create a console.log helper if you don;t already have one http://stackoverflow.com/questions/17499742/how-do-i-add-console-log-javascript-logic-inside-of-a-handlebars-template – Quince Nov 06 '14 at 12:08
  • @Quince-I've update my question ,please see if you can help,Thanks! –  Nov 06 '14 at 13:07
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/64398/discussion-between-quince-and-mark). – Quince Nov 06 '14 at 13:24

1 Answers1

3

It's hard to tell where is exactly is the error in your code, without seeing it all together on the page.

But here is my attempt to implement your task:

Here is the handlebars template:

<script id="template" type="text/x-handlebars-template">
  {{#each user}}
    user.test( {{name}}, function(){});
  {{/each}}
</script>

and javascript I used look like this:

 var userList = {
     user: [{name : "Mike"},{name : "Adam"},{name : "John"}]
 };

 var source = $("#template").html();
 var template = Handlebars.compile(source);

$("#output").html(template(userList));

gives next output:

user.test( Mike, function(){}); 
user.test( Adam, function(){}); 
user.test( John, function(){});

you can see it in action at this jsfiddle

Igor Milla
  • 2,767
  • 4
  • 36
  • 44
  • HI Igor 1+,I've some similar problem ,my question is how should I put the generated code one under one instead all in the same line.Thanks! – mileyH Nov 06 '14 at 20:23
  • I guess you can just add `
    `. here is example http://jsfiddle.net/wLkgyw7g/5/
    – Igor Milla Nov 06 '14 at 20:40