Knockout.js KnockoutJS映射子属性存在问题

我刚刚开始学习KnockoutJS，所以我可能错过了一些简单的东西，但这是我的问题

下面是我的班级类型

public class ClassType
{
    [HiddenInput(DisplayValue = false)]
    public int ID { get; set; }

    [Required(ErrorMessage = "Please enter a description")]
    public string Description { get; set; }

    [Display(Name = "Class Slots")]
    public int ClassSlots { get; set; }
}

我的控制器中有一个方法，可以返回一个名为GetAll的所有设置类型的列表

public JsonResult GetAll()
    {
        var classtypes = classtypeRepository.All;
        return Json(classtypes, JsonRequestBehavior.AllowGet);
    }

在我看来，我有以下代码将数据加载到我的viewmodel中

<script type="text/javascript">
$(document).ready(function () {
    $.get("/ClassTypes/GetAll/", "", function (data) {
        var viewModel = {
            classtypes: ko.observableArray()
        };
        viewModel.classtypes = ko.mapping.fromJS(data);
        ko.applyBindings(viewModel);
    });
});
</script>

如果我试图将任何东西绑定到视图模型，它似乎不理解属性

 <tbody>
    <!-- ko.foreach: classtypes -->
         <tr>
            <td></td>
            <td data-bind="text: Description">
            </td>
            <td data-bind="text: ClassSlots">
            </td>
        </tr>
    <!-- /ko -->
</tbody>

---

我使用knockoutJS映射插件带来了我认为可以为我创建viewmodel结构的数据。我遗漏了什么？

除了一件事，您的代码是正确的
要从数组中获取特定属性，您应该调用

$data。您的\u-specific\u-property\u-NAME

HTML代码：

我还为您创建了JSFIDLE

开始更新
它也适用于foreach注释，但是您在

ko中有一个输入错误。foreach

comment，实际上您应该将一个点（'.'）更改为空白（''），就像这样

，这里还有正确的HTML代码：

<table style="border: 1px solid #222;">
  <tbody>
    <!-- ko foreach: classtypes -->
    <tr >
      <td></td>
      <td data-bind="text: $data.Description"></td>
      <td data-bind="text: $data.ClassSlots"></td>
    </tr>
    <!-- /ko -->
  <tbody>
</table>

---

结束更新

请尝试执行以下操作：

这对我不起作用。我得到了同样的结果好吧，我找到了一个解决方案，但也许有人能告诉他们为什么这样做有效。我正在使用knockout 2.2.0，我认为它支持控制流模板，但这似乎是问题所在。如果我接受otu注释并在tbody标记上放置数据，则表明我已更新了我的答案，该答案应能回答您关于foreach注释的最后一个问题如果您在此处结束，因为您的父属性未定义，破坏了您的绑定，（很抱歉通知，OP！）您的答案是正确的，因为在body标签上使用foreach。我看不出你在HTML的最后一部分做了什么不同的事情，这与我用注释使它工作时所做的不同。你能帮我强调一下区别吗。哦，当然，忘了提一下：）你的foreach评论有一些额外的要点

ko。foreach

但是在

ko

和

foreach

之间应该是一个空格

ko-foreach

修复

foreach

语法就足够了，不需要

$data

前缀

 <tbody>
    <!-- ko.foreach: classtypes -->
         <tr>
            <td></td>
            <td data-bind="text: Description">
            </td>
            <td data-bind="text: ClassSlots">
            </td>
        </tr>
    <!-- /ko -->
</tbody>

<table style="border: 1px solid #222;">
  <tr data-bind="foreach: classtypes">
    <td></td>
    <td data-bind="text: $data.Description"></td>
    <td data-bind="text: $data.ClassSlots"></td>
  </tr>
</table>

var ViewModel = function(data) {
  var self = this;
  self.classtypes = ko.observableArray(initialData);
};

var initialData = [{"ID":1,"Description":"Online","ClassSlots":30},
                   {"ID":2,"Description":"In-House","ClassSlots":15},
                   {"ID":3,"Description":"Hands-On","ClassSlots":10}];

ko.applyBindings(new ViewModel(initialData));

<table style="border: 1px solid #222;">
  <tbody>
    <!-- ko foreach: classtypes -->
    <tr >
      <td></td>
      <td data-bind="text: $data.Description"></td>
      <td data-bind="text: $data.ClassSlots"></td>
    </tr>
    <!-- /ko -->
  <tbody>
</table>