How to implement TypeScript class with property as a class in knockout.js?

Question

I'm new to TypeScript and I'm starting to learn how to use knockout.js with TypeScript and how to create a viewmodel with knockout.js. It's just a simple example trying to understand basic class inside a module, and right know I'm able to create a data-bind with the Client class, it's working correctly the name and lastName, but I have a C# context, so in C# you can create a class like a property inside a class

For example in C# you can create a class like this, creating a property with class Activity

public class Client 
{
    public string ClientName {get;set;}
    public Activity Activity {get;set;}
}

public class Activity
{
    public string ActivityName {get;set;}
}


//And call this like c# but with typescript sort of
Client client = new Client();
client.Activity = new Activity();
client.Activity.ActivityName = "Activity name";

So I want to reproduce something like that with typescript and knockout. So this is what I'm trying but it's not working the activity "class" I can't get it's properties and methods.

module Crm {
    export class Client {
        name: KnockoutObservable<string>;
        lastName: KnockoutObservable<string>;
        activity: KnockoutObservable<Activity>;
        getName() {
            return alert(this.name()); //working correctly on the view
        }
        //constructor(name:string, lastName:string) {
        constructor(){
            this.name = ko.observable("");
            this.lastName = ko.observable("");
            this.activity = ko.observable(new Activity());
        }
    }

    export class Activity {
        id: KnockoutObservable<number>;
        names: KnockoutObservable<string>;
        description: KnockoutObservable<string>;
        date: KnockoutObservable<any>;
        getActivityName() {
            return alert("Actividad: " + this.description()); //not working
        }
        constructor() {
            this.id = ko.observable(0);
            this.names = ko.observable("");
            this.description = ko.observable("");
            this.date = ko.observable("");
        }
    }

    var a = new Client();
    console.log(a);
    ko.applyBindings(new Client());
}

And here it's the simple html I'm testing

<p>First name: <input type="text" data-bind="textInput: name" /> </p> 
<p>Last name: <input type="text" data-bind="textInput: lastName" /></p> 

<button data-bind="click: getName">Get name</button> <!-- working correctly -->
<hr />

<p>Activity</p>
<input type="text" data-bind="activity().description" /> <!-- not working -->

<button data-bind="click: activity().getActivityName">Try me</button> <!-- this click data-bind it's probably wrong, I'm trying to understand how to call the activity method and parameters -->

<script src="~/Scripts/knockout-3.4.2.js"></script>
<script src="~/Scripts/js/client.js"></script>

The client it's working, but the activity isn't. I don't know if I'm trying this the wrong way.

TSV · Accepted Answer · 2017-05-22 11:01:45Z

1

The binding context for the getActivityName is Client object, hence you have wrong this object.

The current bound model is passed to a click function as a first argument.

You can check fiddle with fixed code:

getActivityName(client: Client) {
    return alert("Actividad: " + client.activity().description());
}

You can also change current binding context via with binding:

```

<!-- ko with: activity -->
<input type="text" data-bind="description" />

<button data-bind="click: getActivityName">Try me</button>
<!-- /ko -->

```

You can see this approach in this fiddle.

edited May 22, 2017 at 11:01

answered May 22, 2017 at 10:35

TSV

7,6681 gold badge33 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jorge F Over a year ago

Yeah both methods are working correctly, I know it was something about the "this" with the first approach.

Collectives™ on Stack Overflow

How to implement TypeScript class with property as a class in knockout.js?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related