knockout.js - Knockout binding works in text attribute but throws undefined error when used in href -

i have following binding within foreach binding:

<h5>id: <span data-bind="text: ($root.link + id)"/></h5> 

and displays fine.
if change out

<a data-bind="attr: { href: $root.link}"/> 

the anchor navigates fine (except id isn't appended end).
if add in id

<a data-bind="attr: { href: $root.link +id}"/> 

i 'unable parse binding ... id undefined'.

why exact same binding syntax work text not attr binding?

thanks help.

update: using breezejs uses metadata create observablearray. i've have done more testing , discovered binding fails when field of type integer. passed in name field , binding works fine. tried id.tostring() still id undefined error. suggested below, considering using computed solve problem. if solution, think better extend breeze entity flows through downstream view model.

you need computed observable called linkurl.

self.linkurl = ko.computed(function(){ return $root.link + id; });

http://knockoutjs.com/documentation/computedobservables.html