Typescript and Knockout.js

问题

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.

回答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.

来源：https://stackoverflow.com/questions/43453285/typescript-and-knockout-js

标签

html

typescript

mvvm

knockout.js