【问题标题】:Issue with KnockoutJS mapping child propertyKnockoutJS 映射子属性的问题
【发布时间】:2012-11-23 17:56:20
【问题描述】:

我刚刚开始学习 KnockoutJS,所以我可能遗漏了一些简单的东西,但这是我的问题。

下面是我的 ClassType 类

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);
    }

在我看来,我有以下代码可以将数据加载到我的视图模型中

<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>

我已将以下 div 放入我的视图中以确保返回某些内容

<div data-bind="text: ko.toJSON($data)"></div>

返回如下

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

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

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

我使用了 knockoutJS 映射插件来带来我认为可以为我创建视图模型结构的数据。我错过了什么?

【问题讨论】:

  • 请尝试执行以下操作:&lt;td data-bind="text: $data.Description"&gt;
  • 这对我不起作用。我得到相同的结果
  • 好的,我找到了解决方案,但也许有人可以告诉他们为什么这样做。我正在使用淘汰赛 2.2.0,我认为它支持控制流模板,但这似乎是问题所在。如果我使用 otu cmets 并在 tbody 标签上放置 数据会显示
  • 我已经更新了我的答案,应该可以回答你关于 foreach 评论的最后一个问题
  • 如果你因为你的父属性未定义而来到这里,破坏你的绑定,see my answer here(抱歉通知,OP!)

标签: knockout.js knockout-mapping-plugin knockout-2.0


【解决方案1】:

您的代码是正确的,除了一件事。
要从 Array 获取特定属性,您应该调用 $data.YOUR_SPECIFIC_PROPERTY_NAME
HTML 代码:

<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>


Javascript 代码

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));


我还为你创建了 jsFiddle Click here to see the DEMO


开始更新
它也适用于 foreach cmets,但是您在 ko.foreach 评论中有一个错字,实际上您应该像这样 &lt;!-- ko foreach --&gt; 将一个点 ('.') 更改为空白 (''),这也是您正确的 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>

结束更新

【讨论】:

  • 你的答案是正确的,只要在 body 标签上使用 foreach。我看不出您在 HTML 的最后一点中所做的与我对 cme​​ts 所做的不同以使其正常工作。您能否为我强调一下不同之处。
  • 哦,当然,忘了说:) 你的 foreach 评论有一些额外的点 ko.foreach 但在 koforeach 之间应该是一个空格 ko foreach
  • 修复foreach语法就够了,$data前缀不是必须的
猜你喜欢
相关资源
最近更新 更多
热门标签