This is a migrated thread and some comments may be shown as answers.

Template and Typescript

10 Answers 217 Views
Templates
This is a migrated thread and some comments may be shown as answers.
Ladislav
Top achievements
Rank 1
Ladislav asked on 14 Jan 2014, 05:15 PM
Hi,

I try to convert http://demos.kendoui.com/web/mvvm/source.html into typescript.
I see the items but don't know what to do with deleteProduct.
I get always cannot find "apply" exception from JQuery.

Can you provide a typescript version? Html version works out of the box.

Regards,
Ladislav

10 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 16 Jan 2014, 01:33 PM
Hello Ladislav,

I am afraid that currently we do not have a TypeScript equivalent of our demos. Could you please provide a runnable project where the issue is reproduced? This would help us pinpoint the exact reason for this behavior and advise you further.

Regards,
Alexander Popov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ladislav
Top achievements
Rank 1
answered on 23 Jan 2014, 01:40 PM
Hi,

the html is the same as in example. The typescript:
class data extends kendo.data.ObservableObject {
    productName = "Product name";
    productPrice = 10;
    productUnitsInStock = 10;
    addProduct() {
        this.get("products").push({
            name: this.get("productName"),
            price: parseFloat(this.get("productPrice")),
            unitsInStock: parseFloat(this.get("productUnitsInStock"))
        });
    }
    deleteProduct(e) {
        // the current data item (product) is passed as the "data" field of the event argument
        var product = e.data;

        var products = this.get("products");

        var index = products.indexOf(product);

        // remove the product by using the splice method
        products.splice(index, 1);
    }
    total() {
        return this.get("products").length;
    }
    totalPrice() {
        var sum = 0;

        $.each(this.get("products"), function (index, product) {
            sum += product.price;
        });

        return sum;
    }
    totalUnitsInStock() {
        var sum = 0;

        $.each(this.get("products"), function (index, product) {
            sum += product.unitsInStock;
        });

        return sum;
    }
    products = new kendo.data.ObservableArray(
        [
            { name: "Hampton Sofa", price: 989.99, unitsInStock: 39 },
            { name: "Perry Sofa", price: 559.99, unitsInStock: 17 },
            { name: "Donovan Sofa", price: 719.99, unitsInStock: 29 },
            { name: "Markus Sofa", price: 839.99, unitsInStock: 3 }
        ]);
}


$(document).ready(function () {
    var viewModel = new data();

    kendo.bind($("#example"), viewModel);
});

run it, click on Add new product nothing happens. Click on delete explodes.

Regards,
Ladislav

0
Alexander Popov
Telerik team
answered on 27 Jan 2014, 11:38 AM
Hello again Ladislav,

Thank you for the provided code. I examined it and noticed that you are extending kendo.data.ObservableObject instead of kendo.Observable. Here is an example:  
class data extends kendo.Observable {
    productName = "Product name";
    productPrice = 10;
    productUnitsInStock = 10;
    addProduct = function() {
        this.get("products").push({
            name: this.get("productName"),
            price: parseFloat(this.get("productPrice")),
            unitsInStock: parseFloat(this.get("productUnitsInStock"))
        });
    }


Regards,
Alexander Popov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ladislav
Top achievements
Rank 1
answered on 27 Jan 2014, 12:36 PM
Hi,

why can I extend ObservableObject? Can I use this.get or this.set? I need to push state changes to UI.

Regards,
Ladislav
0
Ladislav
Top achievements
Rank 1
answered on 27 Jan 2014, 01:07 PM
Hi Alexander

Your code is not working, because I have to extend ObservableObject for get/set http://docs.telerik.com/kendo-ui/api/framework/observableobject#methods-get.
0
Alexander Popov
Telerik team
answered on 28 Jan 2014, 12:23 PM
Hello Ladislav,

I apologize for misleading you. The recommended approach is to use the class' constructor to set up the observable's dependency tracking. Here is an example: 
class data extends kendo.data.ObservableObject {
    constructor() {
        super();
        super.init(this)
    }
    ....
}


Regards,
Alexander Popov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ruud
Top achievements
Rank 1
answered on 06 Nov 2015, 11:38 AM

Hi Alexander,

I use your recommended approach (which aligns with the demos provided); however, in my Visual Studio AppBuilders project I continue to get the following error:
Type name 'kendo.data.ObservableObject' in extends clause does not reference constructor function for 'kendo.data.ObservableObject'.

Somehow it seems not to like I create my classes based on this object. The reference paths are working (I have intellisense); I tried all kinds of constructor parameters, but no luck so far. Any ideas? My code looks like this:

/// <reference path="../kendo/typescript/jquery.d.ts" />
/// <reference path="../kendo/typescript/kendo.all.d.ts" />
module AboutModule {
    export class ViewModel extends kendo.data.ObservableObject {
     
        constructor() {
            super();
            super.init(this);
           
        }
    }
    export var viewmodel = new ViewModel();
}

0
Ruud
Top achievements
Rank 1
answered on 06 Nov 2015, 11:40 AM
Sorry, forgot to mention that the error also pops up when removing the module like this:
/// <reference path="../kendo/typescript/jquery.d.ts" />
/// <reference path="../kendo/typescript/kendo.all.d.ts" />
 
class ViewModel2 extends kendo.data.ObservableObject {
 
    constructor() {
        super();
        super.init(this);
 
    }
}
0
Alexander Popov
Telerik team
answered on 10 Nov 2015, 11:02 AM
Hi Ruud,

I am really not sure what is causing this and so far I was not able to reproduce it. Would you please share a runnable sample project where this issue is isolated, so we can proceed with the investigation?

Regards,
Alexander Popov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ruud
Top achievements
Rank 1
answered on 16 Nov 2015, 09:33 AM

Hi Alexander,

I solved it; I had two definition references; one for kendo.mobile.d.ts and one for kendo.all.d.ts. The TS compiler picks this up automatically in Visual Studio. So deleting the kendo.mobile.d.ts file solved the issue. 

Regards,

Ruud

Tags
Templates
Asked by
Ladislav
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Ladislav
Top achievements
Rank 1
Ruud
Top achievements
Rank 1
Share this question
or