Typescript 和 Knockout.js

Posted 2023-03-27

技术标签:

【中文标题】Typescript 和 Knockout.js【英文标题】：Typescript and Knockout.js 【发布时间】：2017-09-13 04:16:01 【问题描述】：

我试图让这段代码工作，我是 typescript 和 knockout.js 的新手我一直在以另一种方式编写这段代码，但有人告诉我这可能是改进现有代码的更好方法，问题是，不工作，也许是一个错字，但我没有找到它。

这是我的打字稿：

/// <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');

这是我的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>

我记得在模型内部做 observables 而不是调用构造函数，但我感觉是一样的。问题是，当我实例化一个对象 Alumno 时，输入文本没有填充我输入的数据。

我试图在淘汰教程和不同的打字稿页面中找到一些信息。也许我错误地绑定了数据。

【问题讨论】：

对于投反对票的人，请给出理由，以便我改进问题，谢谢。 【参考方案1】：

好的，我发现了问题，这很简单，但老实说，我没有注意到。问题出在我的 html 中，在此输入上写入的正确属性是 value 而不是 text，我正在做另一个教程，我必须在 <p> 标签上绑定数据，那就是 text。

【讨论】：

以上是关于Typescript 和 Knockout.js的主要内容，如果未能解决你的问题，请参考以下文章

typescript TypeScript Private Constructos和Singletons

typescript typescript如何绑定和响应切换的示例

typescript 使用TypeScript和MongoDb的Mongoose示例

TypeScript初认识