淘汰 observableArray 不绑定答案

【问题标题】：Knockout observableArray not binding淘汰 observableArray 不绑定
【发布时间】：2013-07-28 11:58:16
【问题描述】：

我正在尝试从 ajax 服务器读取绑定 observableArray，但无法将其绑定到 html。 json 数据正在返回，但不确定如何解析或绑定。我是 Knockout 的新手。

代码：

<html>
<head>
<title></title>
<script type='text/javascript'     src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script>

function SurnameViewModel() {
  var self = this;
  self.Surnames = ko.observableArray();
  $.ajax({
    crossDomain: true,
    type: 'POST',
    url: "http://localhost/GetSurnames/Name/CID",
    dataType: 'json',
    data: { "Name": "d", "CID": "17" }, // <==this is just a sample data
    processdata: true,
    success: function (result) {
    self.Surnames= ko.mapping.fromJS(result.data);
    alert(self.Surnames()); // <== able to see the json data

    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert("Failure!");
        alert(xhr.status);
        alert(thrownError);
    }
  });
}


// Activates knockout.js
$(document).ready(function() {
  ko.applyBindings(new SurnameViewModel())
});
</script>
</head>
<body>
<h2>Surnames</h2>
<table>
    <thead><tr>
        <th>ID</th><th>Surname</th>
    </tr></thead>
        <tbody data-bind="foreach: Surnames">
        <tr>
        <td data-bind="text: Surnames().id"></td>
        <td data-bind="text: Surnames().homename"></td>

    </tr>    
</tbody>
</table>

</body>
</html>

警报返回的 Json 数据

data: "[{"id":3,"homename":"DCosta"}]"

这里做错了什么？

编辑：工作代码

这对我有用。

我改了

ko.mapping.fromJS(result.data, {}, self.Surnames);

到

ko.mapping.fromJSON(result.data, {}, self.Surnames);

在这个html中

<tr>
    <td data-bind="text: Surnames().id"></td>
    <td data-bind="text: Surnames().homename"></td>

</tr>

到这里

<tr>
    <td data-bind="text: id"></td>
    <td data-bind="text: homename"></td>

</tr>

【问题讨论】：

标签： ajax knockout.js

【解决方案1】：

你有两个问题：

在您看来，当使用 foreach 绑定时，您处于数组上下文的“内部”，因此您无需再次写出数组名称 (Surnames())：

<tbody data-bind="foreach: Surnames">
   <tr>
       <td data-bind="text: id"></td>
       <td data-bind="text: homename"></td>
   </tr>
</tbody>

当您从服务器取回数据时，您将覆盖 Surnames 数组，此处使用映射插件的正确方法：

ko.mapping.fromJS(result.data, {} /* empty mapping options */, self.Surnames);

或者

self.Surnames(ko.mapping.fromJS(result.data)());

注意上面代码中的()，你需要这个，因为ko.mapping.fromJS(result.data) 将返回一个ko.observableArray，而不会使用() 获得它的底层值，你最终会得到你的Surnames 包含另一个@987654333 @

【讨论】：

我尝试了 bot 方法正在控制台中获取 Uncaught ReferenceError: Unable to parse bindings. Bindings value: text: id Message: id is not defined 在服务器调用中我实际上正在传递 CID 已更新我的问题
向服务器发送什么并不重要。您在成功回调中得到什么很重要：所以请提醒您从服务器 success: function (result) { alert(result) } 得到什么并发布。你也可以试试fromJSON：ko.mapping.fromJSON(result.data, {} /* empty mapping options */, self.Surnames);
@Adrian 这是一个使用您的示例数据创建的工作 jsfiddle：data: "[{"id":3,"homename":"DCosta"}]" jsfiddle.net/X7feb
我使用了ko.mapping.fromJSON(result.data, {}, self.Surnames);，它成功了。添加 alert(result.data) 后得到的数据是[{"id":3,"homename":"D\u0027Costa"}]
我需要像您的 jsfiddle 示例中那样添加 JSON.stringify 吗？没有它，它就起作用了