Knockout with HTML table issue

Knockout with HTML table issue

本文关键字:issue table HTML with Knockout      更新时间:2023-09-26

基本上,我有一个显示多个表的页面,所有表都通过knockout填充。某些行现在将显示在这个网格中,除非它们填充了数据(特殊条件行)。我有一个KO订阅的可观察对象,它观察行中是否有数据。在这个订阅中有一个函数,它的大意是:

self.requestSubscription = self.hasRequest.subscribe(function (newValue) {
        if (newValue) {
            $("[rowId = '6']").show(); // this 6 is hardcoded
        }
        else {
            $("[rowId = '6']").hide();
        }
    });

问题是,这个函数遍历页面上的每个网格(因为我忘记了jquery是如何工作的),并在每个网格中隐藏行。如何将其减少到隐藏当前网格中的增长?问题是我无法将ID硬编码到网格中因为我不知道页面加载时会出现多少网格。什么好主意吗?谢谢!

这里是一些html减去不必要的内容。这是网格本身的标记。问题是,当我用上面的jquery隐藏Id为"6"的tr时,它会在页面上对每个网格进行隐藏。

<table>
    <tbody>
         <!-- ko foreach: rows() -->
         <tr data-bind="css: { 'request': id() === 6, 'conflict': id() === 8}, attr: { rowId: id() }">
              <td class="title-cell">
                    <span data-bind="text: title(), attr: { TypeId: id() }">Booking Type</span>
              </td>
         </tr>
     </tbody>
</table>

您应该利用Knockout的visible绑定,而不是使用jQuery显示和隐藏行。像这样:

<tr data-bind="visible: myTableModel.hasSpecialCondition">
    <td>Whatever</td>
</tr>

这样显示逻辑就连接到数据而不是DOM。

文档在这里:http://knockoutjs.com/documentation/visible-binding.html