gpt4 book ai didi

javascript - Knockout Js 模板不显示数据

转载 作者:行者123 更新时间:2023-11-30 14:24:40 26 4
gpt4 key购买 nike

我有以下 knockout js 代码,由于某种原因,booking.text 没有显示,请看第 1 列没有文本。

任何人都可以建议我做错了什么以及如何解决这个问题吗?

你可以在这里看到 JS Fiddle 中的运行代码。 http://jsfiddle.net/w3fxtdq8/18/

enter image description here

下面是我使用的代码

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>

关于javascript - Knockout Js 模板不显示数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52135056/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com