Binding attributes of jQuery Mobile widgets with Knockout

Question

I have a page in my jQuery Mobile app with two link-based buttons, I want to bind their attributes to ko.observable() objects:

<div data-role="page" id="details">
    <div data-role="content">
        <!-- ko with: selectedPerson -->
        <div>
            <h2 data-bind="text: name"></h2>                                        
            <a data-role="button" data-bind="attr: { href: phoneLink, title: phone}, text : phone"></a>         
            <a data-role="button" data-bind="attr: { href: emailLink, title: email}, text : email"></a>
        </div>
        <!-- /ko -->                
    </div>
</div>

The problem is that the links don't get rendered as buttons, I see them as simple links.

How can I get jqm and knockout to work together? Do I need to write custom bindings for it?

Thanks

soniiic soniiic · Accepted Answer · 2012-02-01T13:34:29

This is happening because when you're buttonising your anchor tags, these new tags aren't present. To buttonise them after they're created you're going to have to tell knockout to do something after they've been added to the collection. Thankfully, knockout provides you with a function that executes immediately after the elements have been rendered on the screen.

An example of using afterAdd can be seen here:

http://knockoutjs.com/examples/animatedTransitions.html

Unfortunately I've only ever seen it work with templates and not in-line html so you might have to refactor your html slightly.

Binding attributes of jQuery Mobile widgets with Knockout

1 Answers