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.