Binding buttongroup select event to a viewModel function

[Robert]

I'm having trouble binding the select event of a buttongroup to a method of the viewModel.

Typically, this would look something like this:

    <div>
        <ul class="location-type-buttons" data-role="buttongroup" data-index="0" data-bind="...">
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
            <li>Option 4</li>
        </ul>
    </div>

    <div style="position: relative;-webkit-box-flex: 1;border: 1px solid black">
        <div data-role="view" style="position: absolute;">Option 1 Title</div>
        <div data-role="view" style="position: absolute;">Option 2 Title</div>
        <div data-role="view" style="position: absolute;">Option 3 Title</div>
        <div data-role="view" style="position: absolute;">Option 4 Title</div>
    </div>

When I use data-bind="click: doSelect", the views appear correctly but nothing happens (the buttongroup has a select event instead of a click event).

When I use data-bind:"select: doSelect", the titles of the four views appear simultaneously, and the event handler is still not called.

What am I missing here?  Thanks!

[Alexander Valchev]

Hi Robert,

I am afraid that your scenario is a bit unclear. If I understood correctly you would like to navigate between Views through a button group. If that is correct, please check this sample as it demonstrates one possible implementation of such scenario:

• http://jsbin.com/aherem/8/edit

Please note that the right binding syntax is: data-bind="events: { select: onSelect }"

I hope the information will help.

Regards,
Alexander Valchev
Telerik