Binding select event via MVVM

[RES]

I have markup for a button group like the following:

<ul data-role="buttongroup" data-index="0" data-bind="select: deliveryMethodChanged">
    <li>
        Email
    </li>
    <li>
        Download
    </li>
</ul>

I'm trying to use the MVVM method to bind to the select event however I'm getting the following error in version 2013.2.716 at line 10373:
0x800a01bd - JavaScript runtime error: Object doesn't support this action

Am I missing something?  Is it not possible to bind to the select event in this way?

Scott

[Kiril Nikolov]

Hi,

It is possible to bind to the select event of the ButtonGroup. Form the code that you have provided it is impossible to see how exactly do you bind the ViewModel to your View, but please check the following example showing a possible implementation:

http://jsbin.com/UTucoL/1/edit
 
Regards,
Kiril Nikolov
Telerik

[RES]

Okay binding in that way does not throw an exception but now the event doesn't fire.  Here is a little more context.

My view:

<div data-role="view" data-show="app.exports.showSummary">
    <ul class="deliveryMethod" data-role="buttongroup" data-index="0" data-bind="events: { select: deliveryMethodChanged }">
        <li>
            Email
        </li>
        <li>
            Download
        </li>
    </ul>
</div>

My JavaScript:

var exports = (function () {
    var _viewModel = kendo.observable({
        deliveryMethodChanged: function (e) {
            alert("deliveryMethodChanged");
        }
    });

    return {
        showSummary: function (e) {
            kendo.bind(e.view.content, _viewModel);

            // how I have been able to get it to work
            //var deliveryMethod = e.view.content.find(".deliveryMethod").data("kendoMobileButtonGroup");
            //deliveryMethod.bind("select", _viewModel.deliveryMethodChanged);
        }
    };
})();

The commented out lines in showSummary is how I've been able to accomplish the binding without attribute binding.  I don't see what the difference is.

[Kiril Nikolov]

Hello,

Using kendo.bind in the Mobile application is not supported. If you check the example that I sent to you you will see that the ViewModel is binded using the data-model attribute of the View. This is the reason why your example is not working. I would suggest you to take a look at the following article:

http://docs.kendoui.com/getting-started/mobile/mvvm
 
Regards,
Kiril Nikolov
Telerik

[RES]

Why is it "not supported"?  I've used kendo.bind extensively in mobile without any problems.  Most of the time when I try to bind models to views I get all kinds of errors and have to give up and bind programmatically.

[Kiril Nikolov]

Hi,

When a mobile application is created with Kendo UI Mobile you can see that a lot of styling and DOM manipulation is done. This is why you will need to use the data-template attribute to set the model that will be used, so when Kendo UI Mobile creates the application it can apply all the bindings correctly. This all is stated in the this Getting Started article:

http://docs.kendoui.com/getting-started/mobile/mvvm
 
Regards,
Kiril Nikolov
Telerik

[RES]

I read the article and it says it's recommended but I don't see anything in the article where it explicitly says calling kendo.bind is not supported.

[Kiril Nikolov]

Hi,

If kendo.bind() works for you then I can not see a reason why you should not use it. However this is unsupported scenario, and you might observer some unexpected behaviour.
 
Regards,
Kiril Nikolov
Telerik