淘汰賽Js模板不顯示數據

Question

我有以下敲除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> 

Answer 1

您不應該在變量名兩邊加上引號。 線索在於呈現了多少行-8（與單詞“ bookings”中的字母數相同）而不是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>