Knockout/Typescript ko.observables with objects

Question

Im doing the Introduction tutorial for Knockout, the second part of the tutorial is about observables, I have the following code on my .ts (later .js):

/// <reference path="../typings/index.d.ts" />

$(document).ready(function () {
    ko.applyBindings(new ViewModel());
});

class Person {

    firstName: string;
    lastName: string;

    constructor(firstName: string, lastName: string) {
        this.firstName = firstName;
        this.lastName = lastName
    }
}

var ViewModel = function () {

    var person = new Person('MyName', 'MyLastName');
    this.person = person;

    this.person = ko.observable(person.firstName);
    this.person = ko.observable(person.lastName);
};

and I have the following in my cshtml:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />

    <script src="~/bower_components/jquery/dist/jquery.js"></script>
    <script src="~/bower_components/knockout/dist/knockout.js"></script>
    <script src="~/Scripts/greeter.js"></script>

    <title>Index</title>
</head>
<body>
    <div> 
        <p>FirstName: </p> <p data-bind="text: person.firstName"></p>
        <p>LastName: </p> <p data-bind="text: person.lastName"></p>

        <p>First name: <input data-bind="value: person.firstName" /></p>
        <p>Last name: <input data-bind="value: person.lastName" /></p>
    </div>
</body>
</html>

When I run the web app, instead of showing "MyName" and "MyLastName" on my <p> tags it shows nothing and when I write in my <input> it does not show anything in my <p> tags.

So the question is, it is possible to change attributes of a class or I need it change only variables?

Wayne Ellery · Accepted Answer · 2017-04-16 10:32:44Z

1

A better solution is to change the Person class to create observables in the constructor:

class Person {
    firstName: KnockoutObservable<string>;
    lastName: KnockoutObservable<string>;

    constructor(firstName: string, lastName: string) {
        this.firstName = ko.observable(firstName);
        this.lastName = ko.observable(lastName);
    }
}

var ViewModel = function () {
    this.person = new Person('MyName', 'MyLastName');
};

It would also be better to create a class for the ViewModel.

answered Apr 16, 2017 at 10:32

Wayne Ellery

7,9581 gold badge30 silver badges45 bronze badges

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

4 Comments

Nickso Over a year ago

I Agree with your answer, I saw it in the same tutorial and makes sense, less writing.

Nickso Over a year ago

Im having a problem, the values are not being binded to my p tags

Wayne Ellery Over a year ago

Are you using the text binding? Also check the developer tools console to see if there are any errors. Also have you installed the knockout types for typescript?

Nickso Over a year ago

I found an answer, I made a different question here: stackoverflow.com/questions/43453285/typescript-and-knockout-js It was about binding to the incorrect property of an html tag. In this new scenario it was a combobox (select) so the correct property to bind was value and not text. Thanks to your answer for this question tho, at the moment I wrote the above comment I did not realize I was binding to the incorrect property because I did not know,

Nickso · Accepted Answer · 2017-04-11 14:53:02Z

0

Ok, I have found the problem, it was on my typescript, instead of:

var ViewModel = function () {

    var person = new Person('MyName', 'MyLastName');
    this.person = person;

    this.person = ko.observable(person.firstName);
    this.person = ko.observable(person.lastName);
};

It should be:

var ViewModel = function () {

    var person = new Person('MyName', 'MyLastName');
    this.person = person;

    this.person.firstName = ko.observable(person.firstName);
    this.person.lastName = ko.observable(person.lastName); 
};

I did not tell the function that should change the person attributes.

answered Apr 11, 2017 at 14:53

Nickso

7951 gold badge12 silver badges33 bronze badges

Collectives™ on Stack Overflow

Knockout/Typescript ko.observables with objects

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related