Click bind in a nested template doesn't work properly

2 posts, 0 answers
  1. leboart
    leboart avatar
    6 posts
    Member since:
    Mar 2013

    Posted 28 Mar 2013 Link to this post

    Hi All,
    I have the next to two pieces of code:
    <div id="application">
    <script type="text/x-kendo-template" id="application-layout">      
         <div id="command-bar" data-bind="source:this" data-template="command-bar-template">  </div>       
    <script type="text/x-kendo-template" id="command-bar-template">
          <button id="nextButton" class="k-button barButton" data-bind="click: next">Next</button>
          <button id="backButton" class="k-button barButton" data-bind="click: back">Back</button>
    and this:
    var appViewModel = kendo.observable({
        next: function()
          console.log("next pushed");
        back: function()
           console.log("back pushed");
    var appLayout = new kendo.Layout("application-layout", {model: appViewModel});
    The thing is that only works (in this case ) the next button (It prints "next pushed" in the console). So , I say  in this case , because  when I put the "<button id="backButton"..."  first in the "command-bar-template", then  only works the back button. What am I doing wrong?. Here is the jsbin:
  2. Alexander Valchev
    Alexander Valchev avatar
    2895 posts

    Posted 01 Apr 2013 Link to this post

    Hello leboart,

    The problem is that #command-bar-template does not have a root element. To avoid the issue please wrap the buttons inside a tag, for example div.
    <script type="text/x-kendo-template" id="command-bar-template">
         <button id="nextButton" data-bind="click: next">Next</button>
         <button id="backButton" data-bind="click: back">Back</button>

    For your convenience I updated the jsBin sample:
    I hope this will help. 

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top