使用淘汰赛 js 在页面上显示数据时遇到问题 - 数据未显示答案

【问题标题】：trouble using knockout js to display data on page - data not showing使用淘汰赛 js 在页面上显示数据时遇到问题 - 数据未显示
【发布时间】：2013-03-20 09:40:13
【问题描述】：

这是我第一次工作和尝试淘汰赛 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
    }

【问题讨论】：

您编写的 Knockout 代码似乎没有任何问题。这是一个显示它工作的小提琴 - jsfiddle.net/jearles/nKJm7。如果您在 AJAX 调用的成功处理程序中设置断点，您会点击它吗？如果是，请验证返回的 JSON 是否符合您的 ViewModel 期望。还要检查浏览器调试控制台是否有任何记录的错误消息。
我尝试过调试，但我从未在 javascript 中遇到任何问题。我会尽量考虑你的建议。谢谢
您页面上的哪个位置有初始化 ViewModel 的脚本标签？您是否在 HEAD 中加载了 knockout.js？如果您无法中断成功处理程序，则似乎有些事情已经关闭。如果您在 .ajax 调用处设置断点会怎样……会执行吗？尝试使用 ko.applyBindings 调用。
@JohnEarles 我添加了我在上面的 view.cshtml 页面检查代码中显示的所有内容。我尝试了ajax调用并尝试了javascript的第一行但仍然没有成功。

标签： javascript asp.net-mvc json knockout.js knockout-mvc

【解决方案1】：

查看您的代码，我想您正在使用 ASP.NET WebAPI。我认为您应该将您的 ajax 调用地址从 /api/RosterApiController 更改为 /api/RosterApi。

ASP.NET MVC 和 ASP.NET WebAPI 都有路由约定，除了控制器名称没有 Controller 后缀。

【讨论】：

【解决方案2】：

我认为 Slawomir 解决方案绝对是您应该注意的事情，但您可以尝试使用 foreach 填充您的 RosterUsers。

_.each(data, function(user){
    self.RosterUsers.push(new RosterUserObject(user));
});

【讨论】：