Question

我正在使用C＃应用程序中的第一个淘汰页面。我可以看到ajax数据通过fiddler从我的控制器传输到页面但我无法在页面上显示它。

首先，在VS2012中有没有办法查看javascript变量？我希望我能设定一个突破点，看看发生了什么......

这是我的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());

来自控制器的数据如下所示（GetAllGroups / JS：GroupList）：

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

GetGroups / JS控制器的数据：CurrentGroups：

[{"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和spans吗？

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

 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对象foreach项返回，然后将它们放入可观察数组中。

你应该看看淘汰赛映射插件，将数据推送到observables。 http://knockoutjs.com/documentation/plugins-mapping.html

**编辑**

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

通过击倒显示ajax数据

1 个答案: