CODEWITHSUNDEEP
ember.jsember-data
Anthony
Anthony

Reputation: 35928

How to create an external link from emberjs loop?

I'm looping through several items in a model. For each item I would like to create an external link to a page in my application that is not using emberjs. I thought this would be trivial but its not working the way I thought it would work.

This is what I have:

<tbody>
   {{each model itemViewClass=App.ColorView}}
</tbody>

<script type="text/x-handlebars" id="colorTemplate">
   <tr>
                <td>{{date}}</td>
                <td><a href="/myapp/colors/{{id}}/shades">{{name}}</a></td>
    </tr>
</script>

App.ColorView = Em.View.extend({
    templateName: 'colorTemplate'
});

I thought this would create links like these:

/myapp/colors/5/shades
/myapp/colors/45/shades
/myapp/colors/6/shades
...etc.

However, the link is being created like this:

localhost:8080/myapp/colors/%3Cscript%20id='metamorph-33-start'%20type='text/x-placeholder'%3E%3C/script%3E56%3Cscript%20id='metamorph-33-end'%20type='text/x-placeholder'%3E%3C/script%3E/shades

Upvotes: 1

Views: 809

Answers (2)

Raj
Raj

Reputation: 342

You Should implement a itemController to the {{#each}} collection view. In that itemController you can use a computed property to generate the url as 

url : function () {
 return "/myapp/colors/"+this.get('id')+"/shades";
}.property()

Here is a Sample Bin

Hope it helps

Upvotes: 1

wedens
wedens

Reputation: 1830

you should use {{bindAttr href="url"}} for this. url is a method that generates url

Upvotes: 0

Related Questions