0

私は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マッピングプラグインを使用して、ビューモデルの構造を作成すると思われるデータを取得しました。私は何が欠けていますか？

4

1 に答える 1

1

あなたのコードは1つを除いて正しいです。
配列から特定のプロパティを取得するには、HTMLCODEを呼び出す必要があり$data.YOUR_SPECIFIC_PROPERTY_NAME
ます。

<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を作成しました。デモを見るにはここをクリックしてください


更新の開始
また、foreachコメントでも機能しますが、ko.foreachコメントにタイプミスが1つあります。実際には、ドット（'。'）を次のように空のスペース（''）に変更する必要があります。これ<!-- ko foreach -->も正しい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>

更新を終了

于 2012-12-05T21:00:06.547 に答える