How can I bind querystring parameters using Knockout.js?

Question

I have the following code:

<div data-bind="foreach: roomba">
  <h3 data-bind="text: name"></h3>
  <a href="/arena/bots/status?id=1234">View Status</a>
</div>

My dilemma is that I'd like the id parameter in the anchor tag to be bound to the id of the roomba currently being iterated over. How do I do this?

Answer 1

Try Defining the URL in the view binding. Then bind to that url in data-bind="attr"

Take a look at this example:

<ul id="MemberSearch" data-inset="true" data-bind="foreach: members">    
<li> <a  data-bind="attr: { href:Url},text:Name"></a></li>
</ul>

Then in your model

function Member(data) {
            this.Name = ko.observable(data.FirstName + ' ' + data.LastName);
            this.Url = ko.observable("/member/details/"+data.Id);
        }

Answer 2

You should be able to do it as

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

Worked for my example anyway