KnockoutJS ForEach Binding - Dynamic URLs

2
votes

I'm trying to generate dynamic links from a JSON collection via KnockoutJS foreach binding.

Example: 

<div class="profile-links">
  <ul data-bind="foreach: Types">
     <li>
       <a data-bind="attr: { href: 'https://myapp.com/?ref=' + text:TypeId }" />
     </li>
   </ul>
</div>

This generates the following exception from KnockoutJS

Uncaught Error: Unable to parse bindings. Message: SyntaxError: Unexpected token :;

What's the proper way to handle this?

2
knockout.js

2 Answers

9
votes
<div class="profile-links">
  <ul data-bind="foreach: Types">
     <li>
       <a data-bind="attr: { href: 'https://myapp.com/?ref=' + TypeId }" />
     </li>
   </ul>
</div>

You can reference the property without the "text:" prefix by just doing TypeId

2
votes

Try it like this. add () at the end.
<a data-bind="attr: { href: 'https://myapp.com/?ref=' + TypeId() }" />