Asp.net mvc &引用；这"；在typescript和knockout中使用viewmodel时出现问题

有关更新的代码，请参见下文

我正在尝试将敲除与typescript一起使用，但似乎无法将typescript viewmodel绑定到我的视图。。。似乎我对这个

有问题，但我不明白为什么

调用
Fill
方法时，
this.UserList
未定义

这是我的viewModel：

module ViewModels {
    export class UserViewModel {

        constructor() {
            this.UserList = ko.observableArray<KnockoutObservable<Models.User>>([]);

            this.RemoveItem = <(user: KnockoutObservable<Models.User>) => void> this.RemoveItem.bind(this);
            this.AcceptItem = <(user: Models.User) => void> this.AcceptItem.bind(this);
            this.AddItem = <() => void> this.AddItem.bind(this);
        }

        public UserList: KnockoutObservableArray<KnockoutObservable<Models.User>>;
        public Fill() {
            $.ajax({
                type: "POST",
                url: "/Guest/LoadGuest/",
                success: data=> {
                    $(data).each((index: any, item)=> {
                        var guest = new Models.User();
                        guest.FirstName = ko.observable(item.firstName);
                        guest.LastName = ko.observable(item.lastName);
                        guest.IsNew = ko.observable(false);
                        this.UserList.push(ko.observable(guest));
                    });
                }
            });
        }

        public AddItem() {
            var guest = new Models.User();
            guest.FirstName = ko.observable("");
            guest.LastName = ko.observable("");
            guest.IsNew = ko.observable(true);

            this.UserList.push(ko.observable(guest));
        }

        public AcceptItem(user: Models.User) {
            user.IsNew = ko.observable(false);
        }


        public RemoveItem(user: KnockoutObservable<Models.User>) {
            this.UserList.remove(user);
        }


    }
}

模块视图模型{
导出类UserViewModel{
构造函数（）{
this.UserList=ko.observearray（[]）；
this.removietem=void>this.removietem.bind（this）；
this.AcceptItem=void>this.AcceptItem.bind（this）；
this.AddItem=void>this.AddItem.bind（this）；
}
公共用户列表：knockoutobserray；
公众填料（）{
$.ajax({
类型：“POST”，
url:“/Guest/LoadGuest/”，
成功：数据=>{
$（数据）。每个（（索引：任何，项目）=>{
var guest=new Models.User（）；
guest.FirstName=ko.observable（item.FirstName）；
guest.LastName=ko.observable（item.LastName）；
guest.IsNew=ko.可观察（假）；
this.UserList.push（ko.observable（guest））；
});
}
});
}
公共附加项（）{
var guest=new Models.User（）；
guest.FirstName=ko.可观察（“”）；
guest.LastName=ko.observable（“”）；
guest.IsNew=ko.可观察（真）；
this.UserList.push（ko.observable（guest））；
}
公共接受项（用户：Models.user）{
user.IsNew=ko.可观察（假）；
}
public RemoveItem（用户：KnockoutObservable）{
this.UserList.remove（用户）；
}
}
}

以下是我的看法：

<table>
    <thead>
        <tr><th>Prénom</th><th>Nom de famille</th></tr>
    </thead>
    <tbody data-bind="foreach: UserList">
        <tr data-bind="if:IsNew">
            <td><input type="text" data-bind="text: FirstName" /></td>
            <td><input type="text" data-bind="text: LastName" /></td>
            <td><a data-bind="click:$parent.AcceptItem">OK</a><a data-bind="click:$parent.RemoveItem">Annuler</a></td>
        </tr>
        <tr data-bind="if:!IsNew">
            <td data-bind="text: FirstName"></td>
            <td data-bind="text: LastName"></td>
            <td></td>
        </tr>
    </tbody>
</table>
<a id="AddGuest" data-bind="click:AddItem">Add</a>

@section scripts{
    <script src="~/Scripts/models/ModelBase.js"></script>
    <script src="~/Scripts/models/User.js"></script>
    <script src="~/Scripts/viewmodels/UserViewModel.js"></script>
    <script>

        var vm = new ViewModels.UserViewModel();
        vm.Fill();
        ko.applyBindings(vm);
    </script>

}


家喻户晓
奥克纳
添加
@节脚本{
var vm=new ViewModels.UserViewModel（）；
vm.Fill（）；
ko.应用绑定（vm）；
}

这是我的模型：

 module Models{

     export class User extends Models.ModelBase {
         constructor() {
             super();

         }

         public FirstName: KnockoutObservable<string>;
         public LastName: KnockoutObservable<string>;
         public Age: KnockoutObservable<Age>;
     }

     export class Age {
         public ID: KnockoutObservable<number>;
         public Description: KnockoutObservable<string>;
     }
 }

模块模型{
导出类用户扩展模型.ModelBase{
构造函数（）{
超级（）；
}
public FirstName:KnockoutObservable；
public LastName:KnockoutObservable；
公众年龄：可观察到的淘汰赛；
}
出口阶级年龄{
public ID:KnockoutObservable；
公开描述：可观察到淘汰赛；
}
}

用于帮助目的的新工作代码：

视图模型：

module ViewModels {
    export class UserViewModel {
        constructor() {

        }

        public UserList: KnockoutObservableArray<Models.User> = ko.observableArray<Models.User>([]);
        public Fill = () => {
            $.ajax({
                type: "POST",
                url: "/Guest/LoadGuest/",
                success: data=> {
                    for (var i = 0; i < data.length; i++) {
                        var item = data[i];
                        var guest = new Models.User();
                        guest.FirstName(item.firstName);
                        guest.LastName(item.lastName);
                        guest.Age().Description("Test Age");
                        guest.IsNew(false);
                        this.UserList.push(guest);
                    }
                }
            });
        }

        public AddItem = () => {
            var guest = new Models.User();
            guest.FirstName = ko.observable("");
            guest.LastName = ko.observable("");
            guest.IsNew(true);
            this.UserList.push(guest);

        }

        public AcceptItem = (user: Models.User) => {
            user.IsNew(false);
        }

        public RemoveItem = (user: Models.User)  => {
            this.UserList.remove(user);
        }

    }
}

模块视图模型{
导出类UserViewModel{
构造函数（）{
}
公共用户列表：knockoutobserarray=ko.observearray（[]）；
公众填料=（）=>{
$.ajax({
类型：“POST”，
url:“/Guest/LoadGuest/”，
成功：数据=>{
对于（变量i=0；i{
var guest=new Models.User（）；
guest.FirstName=ko.可观察（“”）；
guest.LastName=ko.observable（“”）；
guest.IsNew（true）；
this.UserList.push（guest）；
}
公共AcceptItem=（用户：Models.user）=>{
user.IsNew（false）；
}
public removietem=（用户：Models.user）=>{
this.UserList.remove（用户）；
}
}
}

型号：

 module Models{

    export class ModelBase{
        constructor() {
            this.IsNew = ko.observable(false);
        }
        public IsNew: KnockoutObservable<boolean>;
    }

     export interface IUser {
         FirstName: KnockoutObservable<string>;
         LastName: KnockoutObservable<string>;
         Age: KnockoutObservable<Age>;
     }


     export class User extends Models.ModelBase implements IUser {
         constructor() {
             super();
             this.FirstName = ko.observable("");
             this.LastName = ko.observable("");
             this.Age = ko.observable(new Age());
         }

         public FirstName: KnockoutObservable<string>;
         public LastName: KnockoutObservable<string>;
         public Age: KnockoutObservable<Age>;
     }

     export class Age {
         constructor() {
             this.ID = ko.observable(null);
             this.Description = ko.observable("");
         }

         public ID: KnockoutObservable<number>;
         public Description: KnockoutObservable<string>;
     }
 }

模块模型{
导出类模型库{
构造函数（）{
this.IsNew=ko.可观察（假）；
}
公共是新的：可以观察到淘汰赛；
}
导出接口IUser{
名字：KnockoutObservable；
姓氏：KnockoutObservable；
年龄：可观察到的基因敲除；
}
导出类用户扩展模型。ModelBase实现IUser{
构造函数（）{
超级（）；
this.FirstName=ko.observable（“”）；
this.LastName=ko.observable（“”）；
this.Age=ko.observable（新时代（））；
}
public FirstName:KnockoutObservable；
public LastName:KnockoutObservable；
公众年龄：可观察到的淘汰赛；
}
出口阶级年龄{
构造函数（）{
this.ID=ko.可观察（空）；
本.说明=可观察（“”）；
}
public ID:KnockoutObservable；
公开描述：可观察到淘汰赛；
}
}

视图：


家喻户晓
奥克纳
添加
@节脚本{
var vm=new ViewModels.UserViewModel（）；
vm.Fill（）；
ko.应用绑定（vm）；
}
原因是，当您在fill方法中时，“this”指的是一个新上下文。为了保持“this”的含义，您可以使用self之类的变量进一步引用它-

module ViewModels {
    export class UserViewModel {
        constructor() {
            var self = this;
            self.UserList = ko.observableArray<KnockoutObservable<Models.User>>([]);

            self.RemoveItem = <(user: KnockoutObservable<Models.User>) => void> this.RemoveItem.bind(this);
            self.AcceptItem = <(user: Models.User) => void> this.AcceptItem.bind(this);
            self.AddItem = <() => void> this.AddItem.bind(this);
        }

        public UserList: KnockoutObservableArray<KnockoutObservable<Models.User>>;
        public Fill() {
            var self = this;
            $.ajax({
                type: "POST",
                url: "/Guest/LoadGuest/",
                success: data=> {
                    $(data).each((index: any, item)=> {
                        var guest = new Models.User();
                        guest.FirstName = ko.observable(item.firstName);
                        guest.LastName = ko.observable(item.lastName);
                        guest.IsNew = ko.observable(false);
                        self.UserList.push(ko.observable(guest));
                    });
                }
            });
        }


    }
}

模块视图模型{
导出类UserViewModel{
构造函数（）{
var self=这个；
self.UserList=ko.observearray（[]）；
self.removietem=void>this.removietem.bind（this）；
自我接受项
module ViewModels {
    export class UserViewModel {
        constructor() {
            var self = this;
            self.UserList = ko.observableArray<KnockoutObservable<Models.User>>([]);

            self.RemoveItem = <(user: KnockoutObservable<Models.User>) => void> this.RemoveItem.bind(this);
            self.AcceptItem = <(user: Models.User) => void> this.AcceptItem.bind(this);
            self.AddItem = <() => void> this.AddItem.bind(this);
        }

        public UserList: KnockoutObservableArray<KnockoutObservable<Models.User>>;
        public Fill() {
            var self = this;
            $.ajax({
                type: "POST",
                url: "/Guest/LoadGuest/",
                success: data=> {
                    $(data).each((index: any, item)=> {
                        var guest = new Models.User();
                        guest.FirstName = ko.observable(item.firstName);
                        guest.LastName = ko.observable(item.lastName);
                        guest.IsNew = ko.observable(false);
                        self.UserList.push(ko.observable(guest));
                    });
                }
            });
        }


    }
}

module ViewModels {
    export class UserViewModel {

        UserList: KnockoutObservableArray<KnockoutObservable<Models.User>> = ko.observableArray<KnockoutObservable<Models.User>>([]);

        Fill = () => {
            $.ajax({
                type: "POST",
                url: "/Guest/LoadGuest/",
                success: data => {
                    $(data).each((index: any, item)=> {
                        var guest = new Models.User();
                        guest.FirstName = ko.observable(item.firstName);
                        guest.LastName = ko.observable(item.lastName);
                        guest.IsNew = ko.observable(false);
                        this.UserList.push(ko.observable(guest));
                    });
                }
            });
        }

        AddItem = () => {
            var guest = new Models.User();
            guest.FirstName = ko.observable("");
            guest.LastName = ko.observable("");
            guest.IsNew = ko.observable(true);

            this.UserList.push(ko.observable(guest));
        }

        AcceptItem = (user: Models.User) => {
            user.IsNew = ko.observable(false);
        }


        RemoveItem = (user: KnockoutObservable<Models.User>) => {
            this.UserList.remove(user);
        }
    }
}

        this.RemoveItem = <(user: KnockoutObservable<Models.User>) => void> this.RemoveItem.bind(this);
        this.AcceptItem = <(user: Models.User) => void> this.AcceptItem.bind(this);
        this.AddItem = <() => void> this.AddItem.bind(this);

public UserList: KnockoutObservableArray<KnockoutObservable<Models.User>>;

public UserList = ko.ObservableArray<Modesl.User>([]);

$(data).each((index: any, item)=> {

$.each(data, (index: any, item)=> {

this.UserList.push(ko.observable(guest));

this.UserList.push(guest);

user.IsNew = ko.observable(false);

user.IsNew(false);

<td><input type="text" data-bind="text: FirstName" /></td>

<td><input type="text" data-bind="value: FirstName" /></td>

<tr data-bind="if:!IsNew">

<tr data-bind="ifnot:IsNew">