Binding select event via MVVM

8 posts, 0 answers
  1. RES
    RES avatar
    77 posts
    Member since:
    Sep 2010

    Posted 17 Sep 2013 Link to this post

    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
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 19 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. RES
    RES avatar
    77 posts
    Member since:
    Sep 2010

    Posted 19 Sep 2013 Link to this post

    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.
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 23 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. RES
    RES avatar
    77 posts
    Member since:
    Sep 2010

    Posted 23 Sep 2013 Link to this post

    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.
  7. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 25 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. RES
    RES avatar
    77 posts
    Member since:
    Sep 2010

    Posted 25 Sep 2013 Link to this post

    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.
  9. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 27 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready