Kendo Templates Are Not Working With Typescript (parent().parent() is missing)

[Guilherme]

Hello There

I'm trying to convert the WebSushi application for Typescript.

For some reason, when you use a class the Kendo Template is not able to discover the parent().parent().

class MyViewModel extends kendo.data.ObservableObject {
    items: kendo.data.DataSource;
    constructor(myItems: kendo.data.DataSource) {
        super();
        super.init(this);
        this.items = myItems;
    }

    addToCart(e): void {
        alert("Hello There!");
    }
}

var myData: Array<any> = [
    { "id": 1, "name": "Sashimi salad", "price": 12.0, "image": "http://demos.telerik.com/kendo-ui/content/spa/websushi/images/200/sashimi-salad.jpg", "category" : "Cold starters", "description" : "Organic greens topped with fresh sashimi, wasabi soy vinaigrette.", "featured" : true },
    { "id": 2, "name": "Chirashi sushi", "price": 21.0, "image": "http://demos.telerik.com/kendo-ui/content/spa/websushi/images/200/chirashi-sushi.jpg", "category" : "Cold starters", "description" : "Sushi bar variety with sushi rice.", "featured" : false
}];

var myItems = new kendo.data.DataSource({ schema: { model: {} }, data: myData });
var viewModel: MyViewModel = new MyViewModel(myItems);
var myView = new kendo.View("index-template", { model: viewModel });
myView.render($("#application"));

Here are the templates, the same as we have in WebSushi:

<script type="text/x-kendo-template" id="index-template">
        <ul data-role="listview" data-bind="source: items" data-template="item" id="main"></ul>
    </script>
<script type="text/x-kendo-template" id="item">
        <li class="products">
            <a class="view-details" href="\#">
                <img class="main-image" src="#= image #" alt="#: name#" title="#: name #" />
                <strong data-bind="text: name"></strong>
                <span class="price"><span>$</span><span data-bind="text: price"></span></span>
            </a>
            <button class="add-to-cart" data-bind="click: addToCart">Add to cart</button>
        </li>
</script>

<div id="application"></div>

The point is, I cannot catch the addToCart click event with MyViewModel.
If I debug, the model.parent().parent() is missing.

But! If I use only Javascript like the WebSushi it works.

var indexModel = kendo.observable({
    items: myItems,

    addToCart: function (e) {
        alert("Hello There!");
    }
});

What am I doing wrong?

Please, check the example here:
http://jsfiddle.net/ertzajLn/6/

Thanks!

[Guilherme]

Hey!!!

I just discovered the issue here, when you are using Typescript you MUST use viewModelObject.set("propertyname", value) to set any attribute.

So, to make my example work just use this.set("items", myItems) instead of this.items = myItems
The documentation doesn't explicitly say to use like this and may cause some missunderstandings.
Check here:
http://docs.telerik.com/kendo-ui/typescript

This works:

class ViewModel extends kendo.data.ObservableObject {
    person = new Person();

    constructor() {
        super();

        super.init(this);
    }
}

This doesn't work:

class ViewModel extends kendo.data.ObservableObject {
    person = null;

    constructor() {
        super();

        super.init(this);
        this.person = new Person();
    }
}

Anyway, thanks!