淘汰赛observableArray不绑定 [英] Knockout observableArray not binding
问题描述
我正在尝试从读取的ajax服务器绑定observableArray，但无法将其绑定到html. json数据正在返回，但不确定如何解析或绑定它.我是淘汰赛的新手.
I am trying to bind an observableArray from an ajax server read but not able to bind it to the html. The json data is returning but not sure how to parse or get it to bind. I am new to 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数据
Json Data Returned from the alert
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>
推荐答案
您有两个问题:
在使用foreach绑定的视图中，您位于数组上下文的内部"，因此无需再次写出数组名称(Surnames()):
In your view when using the foreach binding you are "inside" of the context of the array so you don't need to write out the array name (Surnames()) again:
<tbody data-bind="foreach: Surnames">
<tr>
<td data-bind="text: id"></td>
<td data-bind="text: homename"></td>
</tr>
</tbody>
当您从服务器取回数据时，您将覆盖Surnames数组，此处是使用映射插件的正确方法:
When you are getting back the data from the server you are overriding the Surnames array, the correct way of using the mapping plugin here:
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会包含另一个
Note the () in the above code, you need this because the ko.mapping.fromJS(result.data) will return an ko.observableArray without getting its underlaying value with the () you would end up with your Surnames containing another ko.observableArray
这篇关于淘汰赛observableArray不绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
