【问题标题】:Knockout binding json, unable to parse attributes敲除绑定json,无法解析属性
【发布时间】:2012-07-20 03:35:03
【问题描述】:

我正在尝试使用 Knockout 将来自 Grails 控制器的 JSON 数据返回数据绑定到表。我相信返回的 JSON 是好的:

result
[
Object
class: "project.Person"
firstName: "Bill"
id: 2
lastName: "Fake"
__proto__: Object
, 
Object
class: "project.Person"
firstName: "Dale"
id: 3
lastName: "Fake"
__proto__: Object
, 
Object
class: "project.Person"
firstName: "Linda"
id: 4
lastName: "Fake"
__proto__: Object
]

这是我的 javascript:

      var Directory =  {
        list: ko.observableArray([])
      };

      var Person = function(id, first, last) {
        this.id = ko.observable(id);
        this.firstName = ko.observable(first);
        this.lastName = ko.observable(last);
      };

      var loadPeople = function() {
        $.ajax({
          url: "${createLink(action: "getPeople")}",
          type: "post",
          contentType: "application/json",
          success:  function(result) {
            for(p in result) {
              Directory.list.push(new Person(p.id,p.firstName,p.lastName));
            }
            ko.applyBindings(Directory);
          }
        });
      };

      loadPeople();

最后,我的标记:

         <table>
          <thead>
            <tr><th>Id</th><th>First name</th><th>Last name</th></tr>
          </thead>
          <tbody data-bind="foreach: list">
              <tr>
                <td data-bind="text: id"></td>
                <td data-bind="text: firstName"></td>
                <td data-bind="text: lastName"></td>
              </tr>
          </tbody>
        </table>

我查看了类似的问题并尝试了list.PersonPerson,将可观察数组而不是Directory 传递给绑定。当我调试时,Directory.list() 包含一个大小为 3 且类型为 Person 的数组,所以它看起来是正确的。

错误:

未捕获的错误:无法解析绑定属性。信息: ReferenceError: id 未定义;属性值:text:id

感谢任何帮助。

【问题讨论】:

    标签: json knockout.js knockout-2.0


    【解决方案1】:

    你从哪里得到这个结果块,控制台?这不是有效的 JSON,但它看起来像一个有效的 javascript 对象。你真的不应该在这样的调用中应用绑定。它应该发生一次,通常在 domReady 上。更新 viewModel 之后会自动更新绑定;这就是重点。

    不管怎样,我把它扔进了a fiddle,它工作正常。正在发生的其他事情正在破坏您的代码。

    【讨论】:

      猜你喜欢
      • 2013-02-06
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-01-21
      • 2014-07-07
      • 1970-01-01
      • 2011-09-11
      相关资源
      最近更新 更多