Data directives and click event within a View?

[Phil H.]

Hi:

I am experiencing a jQuery error: Object doesn't support property or method 'apply', when I click on the button:

<script id='newButton-template' type='text/x-kendo-template'>
  <button class='k-button' data-bind='click: newProduct'><span class='k-icon k-i-plus'></span> New</button>
</script>
<div id='newProdView'>
</div>
<script type="text/javascript">
  var newProdViewModel = kendo.observable({
     newProduct: function (vm) {
       // vm is the view model
       alert(vm.target.innerText);
     }
  });
  var newTemplate = new kendo.View('newButton-template');
  newTemplate.render("#newProdView", newProdViewModel);
</script>

Phil

[Petyo]

Hi Phil,

Given, you are passing the view model at the render call - it should be passed in the view constructor. Please check the respective help article (which also features several code samples) regarding SPA/MVVM integration and MVVM bound view.

Regards,
Petyo
Telerik

 

 

[Phil H.]

Hi Petyo:

Thanks, this works.

<script id='newButton-template' type='text/x-kendo-template'>
    <button class='k-button' data-bind='click: newProduct'><span class='k-icon k-i-plus'></span> New</button>
</script>
<div id='newProdView'>
</div>
<script type="text/javascript">
    var newProdViewModel = kendo.observable({
        newProduct: function (vm) {
            // vm is the view model
            alert(vm.target.innerText);
        }
    });
    var newTemplate = new kendo.View('newButton-template', { model: newProdViewModel });
    newTemplate.render('#newProdView');
</script>

Phil

[Phil H.]

Hi:
Solved:

var newTemplate = new kendo.View('newButton-template', { model: newProdViewModel });
newTemplate.render('#newProdView');

Phil