Question

我正在尝试从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从警报返回

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>

Answer 1

你有两个问题：

在您使用foreach绑定时的视图中，您是＆＃34;内部＆＃34;数组的上下文，所以你不需要再次写出数组名称（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包含另一个ko.observableArray

Knockout observableArray没有约束力

1 个答案: