Knockout Js模板不显示数据
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Knockout Js模板不显示数据相关的知识,希望对你有一定的参考价值。
我有以下knockout js代码,由于某种原因,booking.text没有显示,看看第1列没有文字。
任何人都可以建议我做错了什么以及如何解决这个问题?
您可以在此处查看JS Fiddle中正在运行的代码。 http://jsfiddle.net/w3fxtdq8/18/
以下是我正在使用的代码
var myViewModel = {
bookings: ko.observableArray([{
text: 'booking 1',
bookingId: 123
},
{
text: 'booking 2',
bookingId: 123
},
{
text: 'booking 3',
bookingId: 123
}
])
};
ko.applyBindings(myViewModel);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table>
<thead>
<th>Column 1</th>
<th>Column 2</th>
</thead>
<tbody data-bind="template: {name: 'booking-table-row-template', foreach: 'bookings', as: 'booking'}">
</tbody>
</table>
<script type="text/html" id="booking-table-row-template">
<tr>
<td data-bind="text: booking.text"></td>
<td>
<A href="#">Remove</a>
</td>
</tr>
</script>
答案
您不应该在变量名称周围加上引号。线索是渲染了多少行 - 8(与'预订'一词中的字母数相同)而不是3(数组的大小)。
你让bookings
成为一个字符串。
var myViewModel = {
bookings: ko.observableArray([{
text: 'booking 1',
bookingId: 123
},
{
text: 'booking 2',
bookingId: 123
},
{
text: 'booking 3',
bookingId: 123
}
])
};
ko.applyBindings(myViewModel);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table>
<thead>
<th>Column 1</th>
<th>Column 2</th>
</thead>
<tbody data-bind="template: {name: 'booking-table-row-template', foreach: bookings, as: 'booking'}">
</tbody>
</table>
<script type="text/html" id="booking-table-row-template">
<tr>
<td data-bind="text: booking.text"></td>
<td>
<A href="#">Remove</a>
</td>
</tr>
</script>
以上是关于Knockout Js模板不显示数据的主要内容,如果未能解决你的问题,请参考以下文章
访问 Javascript Html 模板并使用 Knockout.js 绑定数据
Visual Studio 数据绑定属性突出显示 [knockout.js]
knockout.js 数据中的嵌套 foreach 显示但未正确显示