[英]trouble using knockout js to display data on page - data not showing
这是我第一次工作,尝试使用淘汰赛js,但我无法使其正常工作。 我正在做的是显示从数据库返回的列表/集合-基本上是所有用户及其信息的获取。
问题:到目前为止,我所写的内容并没有使数据显示在页面上,并且不确定我在做什么错或遗漏。 如果我缺少其他任何有助于解决问题的代码,请告诉我。 谢谢!
查看页面
@using ProjectB.Shared.Models
@using System.Collections
@using ProjectB.Shared.Services
<html>
<head>
<script type ="text/javascript" src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/knockout-2.2.1.js"></script>
<script src="~/Scripts/knockout.mapping-latest.js"></script>
</head>
<body>
<table data-bind="visible: RosterUsers().length>0">
<thead>
<tr>
<td>Name</td>
<td>Content Role</td>
<td>Email</td>
<td></td>
</tr>
</thead>
<tbody data-bind="foreach: RosterUsers">
<tr>
<td><span data-bind="text: Name"></span></td>
<td><span data-bind="text: ContentRole"></span></td>
<td><span data-bind="text: Email"></span></td>
</tr>
</tbody>
</table>
<script type ="text/javascript">
var rUserViewModel = function () {
var self = this;
self.Name = ko.observable("");
self.ContentRole = ko.observable("");
self.Email = ko.observable("");
var rUserData = {
Name: self.Name,
ContentRole: self.ContentRole,
Email: self.Email
};
self.RosterUsers = ko.observableArray([]);
GetRosterUser();
function GetRosterUser() {
$.ajax({
type: "GET",
url: "/api/RosterApiController",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
self.RosterUsers(data);
},
error: function (error) {
alert(error.status + " <--and--> " + error.statusText);
}
});
}
};
ko.applyBindings(new rUserViewModel());
</script>
</body>
</html>
模型
public partial class RosterVw
{
public RosterVw()
{
this.Users = new HashSet<RosterUser>();
}
public ICollection<RosterUser> Users { get; set; }
}
public partial class RosterUser
{
public string Name { get; set; }
public ContentRoles ContentRole { get; set; }
public string Email { get; set; } //Photo is unique to email address
}
查看您的代码,我想您正在使用ASP.NET WebAPI。 我要把ajax调用地址从/api/RosterApiController
为/api/RosterApi
。
ASP.NET MVC和ASP.NET WebAPI均具有路由约定,除了没有 Controller
后缀的控制器名称外。
我认为Slawomir解决方案绝对是您应该注意的事情,但是您可以尝试使用foreach填充RosterUsers。
_.each(data, function(user){
self.RosterUsers.push(new RosterUserObject(user));
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.