Question

我对使用JSON和Html5有点新意。我的目标是使用我现有的EF，并使用Knockout，HTML5和JSON整理一个遍历EF结果的页面。

我似乎遇到的第一个问题是JSON中返回的序列。它看起来像我预期的那样或者像EF显示它。

    [
  {
    "$id": "1",
    "Id": 1,
    "FirstName": "Scott",
    "LastName": "White",
    "Email": "scott.white@test.com",
    "Department": "IT",
    "Assistant": "",
    "Contacts": [
      {
        "$id": "2",
        "Person1": {
          "$id": "3",
          "Contacts": [
            {
              "$ref": "2"
            }
          ],
          "Notes": [
            {
              "$id": "4",
              "Person1": {
                "$ref": "3"
              },
              "Id": 1,
              "Person": 1,
              "Note1": "Testing notes"
            }
          ],
          "Office1": {
            "$id": "5",
            "People": [
              {
                "$ref": "3"
              }
            ],
            "Id": 1,
            "ShortCode": "CDF",
            "OfficeName": "Cardiff",
            "Address": "my House, my Place, Cardiff",
            "Postcode": "CF10 3AA",
            "Telephone": "029 2000 0000",
            "Fax": "029 2000 0000",
            "Dx": "300000 Cardiff 1",
            "Floor": "0, 1, 2, 3",
            "Equipment": "2 x OHP, 1 x Screen, 1 x Video Camera,2 x Flip Charts"
          },
          "Id": 1,
          "FirstName": "Scott",
          "LastName": "White",
          "Email": "scott.white@test.com",
          "Department": "IT",
          "Office": 1,
          "Assistant": ""
        },
        "Id": 1,
        "Person": 1,
        "Number": "02920 000011",
        "NumberType": "Business"
      }
    ],
    "Notes": [
      {
        "$ref": "4"
      }
    ],
    "Office1": {
      "$ref": "5"
    }
  }
]

所以我试图像这样遍历这个（对此我来说太新了）。我已经设置了MVVM

 <script type="text/javascript">
        function PersonsViewModel() {
            var self = this;
            self.loaded = ko.observable(false);
            self.persons = ko.observableArray([]);

            // Load the initial state
            $.getJSON("api/person", self.persons)
                .done(function () { self.loaded(true); });
        }

        $(document).ready(function () {
            ko.applyBindings(new PersonsViewModel());
        })

    </script>

HTML 5数据绑定如此

<ul id="persons" data-bind="foreach: persons">
            <li class="ui-widget-content ui-corner-all">
                <div>
                    <span data-bind="text: FirstName || 'FirstName?'"></span>&nbsp;
                    <span data-bind="text: LastName || 'LastName?'"></span>
                </div>

                <ul data-bind="foreach: Contacts">

                    <li class="ui-widget-content ui-corner-all">
                        <div>
                            Test<span data-bind="text: OfficeName || 'OfficeName?'"></span>
                        </div>
                    </li>
                </ul>
                <div>
                    <a data-bind="visible: Email,
                          text: Email,
                          attr: { href: 'mailto:' + Email }"></a>
                    <span data-bind="visible: !Email">Email?</span>
                </div>
            </li>
        </ul>

我似乎唯一得到的结果是FirstName和LastName。我真的不知道如何正确地遍历结构，如前所述，无论如何它似乎有点奇怪。我在jsfiddle中解析了JSON。有人可以指出我正确的方向。

提前致谢斯科特

Answer 1

填充persons的方式是错误的。请尝试以下方法：

        $.getJSON("api/person").done(function (persons) {
            ko.utils.arrayPushAll(self.persons, persons);
            self.loaded(true); 
        });

Answer 2

我看到你做错了什么。

关于将JSON分配给ko.observable，您使用'getJSON'jQuery函数是不恰当的。要分配给ko.observable，您需要传入值，而不是使用'='运算符赋值。在您的情况下，您认为返回结果只会通过将'self.persons'放在$ .getJSON函数调用的第二个参数中来将自己分配给self.persons。从JavaScript规则角度或KnockoutJS角度来看，这不起作用。

首先，您不能使用现有变量来捕获函数的方法调用中的参数。这些被声明并作用于函数调用。

其次，阵列的KnockoutJS分配已完成，ko.utils.arrayPushAll(self.persons, json);

重写你的代码来处理它......

        $.getJSON("api/person")
            .done(function (json) {
                ko.utils.arrayPushAll(self.persons, json);
                self.loaded(true); 
        });

Answer 3

在视图模型中，“联系人”中的第一个对象名为“Person1”。我会对此进行重组，但要获得“OfficeName”，您需要

data-bind="Person1.Office1.OfficeName"

重组的一个建议是

{ ..., Contacts: [ id: XXX, Person: { ..., Notes: [ ... ], Office: { ... } } ] }

请记住，当您运行foreach绑定时，您的上下文将成为您循环的对象中的对象实例。

淘汰赛，实体框架和html5

3 个答案: