c# - 通过 knockout 显示 ajax 数据

Question

我正在使用 C# 应用程序处理我的第一个 knockout 页面。我可以看到 ajax 数据通过 fiddler 从我的 Controller 传输到页面，但我无法将其显示在页面上。

首先，在 VS2012 中有没有办法查看 javascript 变量？我希望我可以设置一个断点来查看发生了什么......

这是来 self 的 MVC 页面的 javascript:

<script type="text/javascript">

var RecID = "@Model.RecID";


var groupLine = function() {
    var self = this;
    self.ID = ko.observable();
    self.GroupName = ko.observable();
    self.EndDate = ko.observable();
    self.bRemove = ko.observable();
};

var groupModel = function () {
    var self = this;
    self.lines = ko.observableArray([new groupLine()]);
    // Operations
    self.addLine = function() { self.lines.push(new Group()) };
    self.removeLine = function(line) { self.lines.remove(line) };


     self.GroupList = ko.observableArray([]);
     var CurrentGroups = ko.observableArray([]);

     $.ajax({
        url: '@Url.Action("GetGroups", "Edit")',
        cache: false,
        type: 'GET',
        contentType: 'application/json; charset=utf-8',
        dataType: "json",
        data: {szUserRecID: RecID},
        success: function (data) {
            CurrentGroups(data);
        },
        error: function (error) {
            alert(error.status + "<--and--> " + error.statusText);
        }
     });

     $.ajax({
        url: '@Url.Action("GetAllGroups", "Edit")',
        cache: false,
        type: 'GET',
        contentType: 'application/json; charset=utf-8',
        dataType: "json",
        data: {},
        success: function (data) {
           self.GroupList(data);
        },
        error: function (error) {
            alert(error.status + "<--and--> " + error.statusText);
        }
    });
 };


ko.applyBindings(new groupModel());

来自 Controller 的数据如下所示(GetAllGroups/JS:GroupList):

[{"ID":756,"GroupName":"Blue"},{"GroupName":"Red","ID":755},{"GroupName":"Green","ID":757}]

来自 GetGroups/JS:CurrentGroups Controller 的数据:

[{"ID":756,"GroupName":"Blue"},{"GroupName":"Red","ID":755}]

这不起作用，但我只想使用表格显示当前组:

<h2>Current Groups</h2>
<div data-bind="template: { name: 'group-template', foreach: CurrentGroups }"></div>

<table>
<thead>
    <tr>
        <th>Group Name</th>
        <th>Duration</th>
    </tr>
</thead>
<tbody data-bind="foreach: CurrentGroups">
    <tr>
        <td>
            <span data-bind="text: GroupName"></span>
        </td>            
    </tr>

</tbody>
</table>

我要使用下拉列表处理新组时要填充的下一个表，但下拉列表中仍未显示任何数据....

Answer 1

foreach 似乎创建了一堆空白的 tr 和 span 吗？

看起来您正在将数据推送到可观察数组中，但每个元素都不是可观察的。

 success: function (data) {
            CurrentGroups(data);
        },

应该更像

    success: function(data) {
    // use mapper.  complex objects require 
    // mapping configs
    ko.mapping.fromJS(data, {}, self);

    // or  do it manually 
    var currentGroups = $.map(data, function(data) {
        var item = new groupLine();
        item.GroupName(data.GroupName);// pushes each element property into observable
        ... //all properties
        return item;
    });

      self.CurrentGroups(currentGroups);
}

您应该为返回的每个项目创建一个新的 currentGroup 对象，然后将它们放入可观察数组中。

您应该查看 knockout 映射插件，以将数据推送到可观察对象中。 http://knockoutjs.com/documentation/plugins-mapping.html

** 编辑 **

更改示例代码以与问题代码对齐