Search code examples
kendo-mobilekendo-mvvmkendo-template

kendo ui mobile events in templates not fireing


I using this approach for my new app.

http://blogs.telerik.com/blogs/14-03-27/structuring-hybrid-mobile-applications

But I running in a problem with click events when I calling templates in my view.

Everything else like data binding init kendo widgets works fine.

What I missing here?

<div data-role="view" id="home" data-model="APP.home.model" data-init="APP.home.events.init" data-after-show="APP.home.events.afterShow" style="display: none;">
<header data-role="header">
<div data-role="navbar">
  <a data-role="button" data-rel="drawer" href="#categories" data-icon="drawer-button" data-align="left"></a>
  <span data-role="view-title"></span>
     <div data-role="button"  data-bind="click: hello" data-align="right" data-icon="compose">a</div>
</div>
</header>
<div>TEST me</div>
<div data-role="button" data-bind="click: hello" data-align="right" data-icon="compose">a</div>
<div id="testMe">
</div>
<div id="home-grid" class="grid home-grid"></div>
</div>

<script>
var events = {
    init: function (e) {
        navbar = e.view.header.find('.km-navbar').data('kendoMobileNavBar');
        var template = kendo.template($("#testMe_tmp").html());
        $("#testMe").html(template({}));
        kendo.mobile.init($("#testMe"));
    },
    afterShow: function (e) {
        navbar.title("b");

    }
};
</script>

Thanks in advance

T.S


Solution

  • I found a solution

    after

      kendo.mobile.init($("#testMe"));
    

    add this

      kendo.bind($("#content"),model);
    

    I don't understand why then I never find a sample source need this.

    T.S