使用 Knockoutjs 绑定对象列表
本文关键字:列表 对象 绑定 Knockoutjs 使用 | 更新日期: 2023-09-27 18:25:49
我正在尝试使用KnockoutJS和Knockout Mapping将数据绑定到Webforms应用程序 ASP.NET
.HTML
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/knockout-2.3.0.js" type="text/javascript"></script>
<script src="Scripts/knockout.mapping-latest.js" type="text/javascript"></script>
<script type="text/javascript">
function bindModel(data) {
var viewModel;
viewModel = ko.mapping.fromJS(data);
console.log(viewModel);
ko.applyBindings(viewModel);
}
$(document).ready(function () {
$.ajax({
url: "TestPage.aspx/GetItems",
data: {},
type: "POST",
contentType: "application/json",
dataType: "JSON",
timeout: 10000,
success: function (result) {
bindModel(result);
},
error: function (xhr, status) {
alert(status + " - " + xhr.responseText);
}
});
});
</script>
...
<table>
<thead>
<tr>
<th>
Id
</th>
<th>
Name
</th>
</tr>
</thead>
<tbody data-bind="foreach: Item">
<tr>
<td data-bind="text: Id">
</td>
<td data-bind="text: Name">
</td>
</tr>
</tbody>
</table>
C#
[WebMethod]
public static List<Item> GetItems()
{
List<Item> itemlist = new List<Item>
{
new Item {Id = 1, Name = "Item1", Description = "Item 1 Description"},
new Item {Id = 2, Name = "Item2", Description = "Item 2 Description"}
};
return itemlist;
}
public class Item
{
public int Id { get; set; }
public string Name { get; set; }
public string Description { get; set; }
}
杰伦响应
{"d":[{"__type":"KnockoutWebFormsTest.Item","Id":1,"Name":"Item1","Description":"Item 1 Description"},{"__type":"KnockoutWebFormsTest.Item","Id":2,"Name":"Item2","Description":"Item 2 Description"}]}
但这给出了一个错误,
Uncaught ReferenceError: Unable to parse bindings.
Bindings value: foreach: Item
Message: Item is not defined
我在这里做错了什么,如何解决这个问题?
编辑:
如果我直接用数据调用bindModel
,例如
bindModel({ "d": [{ "__type": "KnockoutWebFormsTest.Item", "Id": 21, "Name": "Item1", "Description": "Item 1 Description" }, { "__type": "KnockoutWebFormsTest.Item", "Id": 2, "Name": "Item2", "Description": "Item 2 Description"}] });
并将data-bind="foreach: Item"
更改为data-bind="foreach: d"
(如 david.s 建议的那样(
它工作正常...但是如果我将 JSON 结果直接传递给绑定模型,它会给出错误
d is not defined
知道如何解决这个问题吗?
从您的 JSON 响应{"d":[ ... ]}
我可以看到该数组称为 d
。所以你的绑定应该是foreach: d
的。
只是一个猜测,但你没有传递要绑定的数组。您正在传递 json 对象。 {d:[{foo:bar},{foo:bar},]}
您可以将此行更改为bindModel(result);
以bindModel(result.d);
访问"d"包含的数组。
我创建了一个JSBin。http://jsbin.com/uxikew/2/edit
ajax 调用已被删除,但你明白了。
感谢您的所有答案和帮助...
终于设法让它工作,
通过将data-bind="foreach: Item"
更改为data-bind="foreach: d"
(如David.S所指出的那样(
和viewModel = ko.mapping.fromJS(data);
viewModel = ko.mapping.fromJSON(data);