Click bind in a nested template doesn't work properly

[leboart]

Hi All,
I have the next to two pieces of code:

<div id="application">

</div>
<script type="text/x-kendo-template" id="application-layout">
     <div id="command-bar" data-bind="source:this" data-template="command-bar-template">  </div>
</script>
<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>
</script>

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});
appLayout.render("#application");

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: http://jsbin.com/edamuj/631

[Alexander Valchev]

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">
  <div>
     <button id="nextButton" data-bind="click: next">Next</button>
     <button id="backButton" data-bind="click: back">Back</button>
  </div>
</script>

For your convenience I updated the jsBin sample: http://jsbin.com/edamuj/640/edit
I hope this will help. 

Kind regards,
Alexander Valchev
the Telerik team