请参阅下面的更新代码
我正在尝试使用打字稿和打字稿,但似乎我无法将我的打字稿视图模型绑定到我的视图……似乎我有一个问题,但我不明白为什么……
这是我的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); } } }
这是我的观点:
<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> }
这是我的模型:
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>; } }
帮助目的的新工作代码:
视图模型:
module viewmodels { export class Userviewmodel { constructor() { } public UserList: KnockoutObservableArray<Models.User> = ko.observableArray<Models.User>([]); public Fill = () => { $.ajax({ type: "POST",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<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>; } }
视图:
<table> <thead> <tr><th>Prénom</th><th>Nom de famille</th><th>Age</th></tr> </thead> <tbody data-bind="foreach: UserList"> <tr data-bind="ifnot:$data.IsNew"> <td data-bind="text: FirstName"></td> <td data-bind="text: LastName"></td> <td data-bind="text: Age().Description"></td> </tr> <tr data-bind="if:$data.IsNew"> <td><input type="text" data-bind="value: FirstName" /></td> <td><input type="text" data-bind="value: LastName" /></td> <td><input type="text" data-bind="value: Age().Description" /></td> <td><a data-bind="click:$root.AcceptItem">OK</a><a data-bind="click:$root.RemoveItem">Annuler</a></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> }
解决方法
如果您希望将其绑定到Userviewmodel,则可以使用此方法:
module viewmodels { export class Userviewmodel { UserList: KnockoutObservableArray<KnockoutObservable<Models.User>> = ko.observableArray<KnockoutObservable<Models.User>>([]); Fill = () => { $.ajax({ type: "POST",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); } } }
这是一个到demo的TypeScript Playground
您可以阅读此处使用的方法的说明:http://blogs.msdn.com/b/typescript/archive/2013/08/06/announcing-0-9-1.aspx(选中“更好’此’处理)
顺便说一下,我怀疑你在哪里有KnockoutObservable< Models.User>你应该有Models.User,当你有this.UserList.push(ko.observable(guest));你实际上应该有this.UserList.push(guest);.我没有更改代码示例,以防我错过了什么.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。