在typescript和knockout中使用viewmodel时出现"this"问题

请参阅下面的更新代码

我正在尝试使用打字稿和打字稿,但似乎我无法将我的打字稿视图模型绑定到我的视图......似乎我有一个问题,this但我不明白为什么...

在this.UserList调用的时候是不确定的Fill方法

这是我的viewModel:

module ViewModels {
    export class UserViewModel {

        constructor() {
            this.UserList = ko.observableArray>([]);

            this.RemoveItem = <(user: KnockoutObservable) => 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>;
        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) {
            this.UserList.remove(user);
        }


    }
}

这是我的观点:

    

        
Prénom
Nom de famille
    
    

        

            

            

            
OKAnnuler
        
        

            

            

            

        
    

Add

@section scripts{
    
    
    
    

}

这是我的模型:

 module Models{

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

         }

         public FirstName: KnockoutObservable;
         public LastName: KnockoutObservable;
         public Age: KnockoutObservable;
     }

     export class Age {
         public ID: KnockoutObservable;
         public Description: KnockoutObservable;
     }
 }

帮助目的的新工作代码:

视图模型:

module ViewModels {
    export class UserViewModel {
        constructor() {

        }

        public UserList: KnockoutObservableArray = ko.observableArray([]);
        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);
        }

    }
}

模型:

 module Models{

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

     export interface IUser {
         FirstName: KnockoutObservable;
         LastName: KnockoutObservable;
         Age: KnockoutObservable;
     }


     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;
         public LastName: KnockoutObservable;
         public Age: KnockoutObservable;
     }

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

         public ID: KnockoutObservable;
         public Description: KnockoutObservable;
     }
 }

视图:

        

            
Prénom
Nom de famille
Age
        
        

            

                

                

                

            
            

                

                

                

                
OKAnnuler
            
        



    Add
@section scripts{
    
    
    
    

}

John Reilly.. 9

如果你想this受到约束UserViewModel,那么也许可以使用这种方法:

module ViewModels {
    export class UserViewModel {

        UserList: KnockoutObservableArray> = ko.observableArray>([]);

        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) => {
            this.UserList.remove(user);
        }
    }
}

这是一个TypeScript Playground来演示

您可以阅读此处使用的方法的说明:http://blogs.msdn.com/b/typescript/archive/2013/08/06/announcing-0-9-1.aspx(选中"更好'这个'处理)

顺便说一下,我怀疑KnockoutObservable你应该拥有的实际拥有的地方Models.User以及this.UserList.push(ko.observable(guest));你实际应该拥有的地方this.UserList.push(guest);.我没有更改代码示例,以防我错过了什么.