Knockout Js 模板不显示数据

Question

我有下面的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>

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>

Knockout Js 模板不显示数据

Knockout Js template not displaying data

html

javascript

knockout.js