asp.net-mvc – 在typescript和knockout中使用viewmodel时的“th
发布时间:2020-12-16 07:36:45 所属栏目:asp.Net 来源:网络整理
导读:请参阅下面的更新代码 我正在尝试使用打字稿和打字稿,但似乎我无法将我的打字稿视图模型绑定到我的视图……似乎我有一个问题,但我不明白为什么…… 调用Fill方法时,this.UserList未定义 这是我的viewModel: module ViewModels { export class UserViewModel
请参阅下面的更新代码
我正在尝试使用打字稿和打字稿,但似乎我无法将我的打字稿视图模型绑定到我的视图……似乎我有一个问题,但我不明白为什么…… 调用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); } } } 这是我的观点: <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);.我没有更改代码示例,以防我错过了什么. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- asp.net – 通过ajax将jquery中的数组传递给c#webmethod
- asp.net-mvc-3 – 获取行中的第一个和第二个td元素
- 在asp.net中制作某些页面的最佳方法是什么?需要登录?
- 在ASP.Net MVC中将JSON转换为C#类
- asp.net-mvc-5 – MVC AttributeRoute似乎忽略了RoutePrefi
- 解决“这个操作需要IIS集成管道模式”在ASP.net MVC2
- 编辑并在ASP.NET Web项目中继续
- asp.net 文件上传与刷新与asp.net页面与iframe之间的数据传
- asp.net-mvc – 有没有办法重命名RequestVerificationToken
- 单元在ASP.NET中测试登录
推荐文章
站长推荐
- asp.net – 控制Web / MSDeploy发布的内容:PDF文
- asp.net – 如何处理错误时使用jQuery.ajax()?
- .resx本地化不能与ASP.Net一起使用 – C#
- asp.net – 如何在.Net Core中间件中获取当前子域
- asp.net – 将tracelistener添加到web.config
- 循环 – 如何检查我是否在ADO Recordset的最后一
- asp.net-mvc – MVC在会话中保存令牌
- asp.net-mvc – MVC3 Razor视图中的文本文字问题
- ASP.NET 2.5前缀ctl00和ASP.NET 4不是前缀ctl00
- asp.net-mvc-3 – 提交后的mvc3复选框值
热点阅读