kendo ui template binding

Question

I am using Kendo UI for my web application. I have such a strange behavior in my application:

    <script id="Template" type="text/x-kendo-template">
        <div data-bind="click: firstClick">First</div>
        <div data-bind="click: secondClick">Second</div>
    </script>
    <div data-bind="click: firstClick">First</div>
    <div data-bind="click: secondClick">Second</div>
    <ul id="menu-groups" data-template="Template" data-bind="source: dataSource"></ul>

And here is the viewModel:

       var viewModel = kendo.observable({
            dataSource: dataSource,
            menuClick: function(e) {
                alert(e);
            },
            firstClick: function(e) {
                alert('first');    
            },
            secondClick: function(e) {
                alert('second');    
            }
        });

When I put divs outside the template, both 2 functions work. When I put divs inside the template fires only the first click, the second doesn't work.

Could you help me to find what's the reason?

Thanks in advance!

Answer 1

There should be single wrapping element inside the template script. Put both divs in a wrapping div and it will work fine.