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

2 posts, 0 answers
  1. Guilherme
    Guilherme avatar
    23 posts
    Member since:
    Nov 2010

    Posted 14 Oct 2014 Link to this post

    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!
  2. Guilherme
    Guilherme avatar
    23 posts
    Member since:
    Nov 2010

    Posted 14 Oct 2014 in reply to Guilherme Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
Back to Top