Typescript and Knockout.js

Question

Im trying to get this code working, Im new to typescript and knockout.js I have been doing this piece of code in another way but someone told me this could be a better way to improve the existing code, the problem is, is not working, maybe is a typo but Im not finding it.

This is my Typescript:

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

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

class Alumno {
    Legajo: KnockoutObservable<string>;
    Nombre: KnockoutObservable<string>;
    Apellido: KnockoutObservable<string>;
    Dni: KnockoutObservable<number>;
    Carrera: KnockoutObservable<string>;
    Turno: KnockoutObservable<string>;

    constructor(Legajo: string, Nombre: string, Apellido: string, Dni: number, Carrera: string, Turno: string) {
        this.Nombre = ko.observable(Nombre);
        this.Apellido = ko.observable(Apellido);
        this.Legajo = ko.observable(Legajo);
        this.Carrera = ko.observable(Carrera);
        this.Turno = ko.observable(Turno);
        this.Dni = ko.observable(Dni);
    }
}


var ABMAlumnosModel = function () {
    this.alumno = new Alumno('sdsdf', 'dsfdsf', 'sdfsdf', 0, 'dsfdsf', 'sdfsdfsd');
}

And this is my cshtml:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ABM_Alumnos</title>
    <script src="~/bower_components/jquery/dist/jquery.js"></script>
    <script src="~/bower_components/knockout/dist/knockout.js"></script>
    <script src="~/Scripts/ABM_Alumnos.js"></script>
    <link href="~/Style/ABM_Alumnos.css" rel="stylesheet" />
</head>
<body>
    <div class="titulo">
        <bold><p>ABM Alumnos del Instituo ESBA</p></bold>
    </div>

    <div>
        <form>

            <div class="float-left c-input-wrapper">
                <p>Nombre: </p><input type="text" data-bind="text: alumno.Nombre"/>   
                <p>Legajo: </p><input type="text" data-bind="text: alumno.Legajo"/>
                <p>Carrera: </p> <select id="alumno.Carreras"></select>
            </div>

            <div class="float-left t-input-wrapper">
                <p>Apellido: </p><input type="text" data-bind="text: alumno.Apellido"/>
                <p>Dni: </p><input type="text" data-bind="text: alumno.Dni" />
                <p>Turno: </p> <select id="alumno.Turnos"></select>
            </div>

            <div class="clear"></div>

            @*<div id="Agregar">
                <button data-bind="click: GetTurnos">Agregar</button>
            </div>*@



        </form>
    </div>
</body>
</html>

I remember doing the observables inside model instead of calling a constructor, but I feel is the same. The thing is, the input texts are not being filled with the data I put when I instance an object Alumno.

I tried to find some info into the knockout tutorial and different typescript pages. Maybe im binding the data incorrectly.

For the person who downvoted, please give a reason so I can Improve the question, Thanks. — Nickso
– Nickso, Commented Apr 17, 2017 at 14:44

Nickso · Accepted Answer · 2017-04-17 15:36:40Z

1

Ok I have found the problem, it was pretty simple, but honestly passed under my radar. The problem was in my html, the correct property to write on this input was value and not text, I was doing another tutorial where I had to bind data on a <p> tag, and that is text.

answered Apr 17, 2017 at 15:36

Nickso

7951 gold badge12 silver badges33 bronze badges

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

Collectives™ on Stack Overflow

Typescript and Knockout.js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related