KnockoutJS - 我们可以对CSS更新进行可观察函数调用吗?



我有一个票务系统,它是使用模板在淘汰赛中编写的。模板结构如下 此模板对页面上的多个用户重复。在这个父母中。分配的票证是分配给用户的工单 ID 列表。

<script type="text/html" id="TicketAssignmentTemplate">
<td>
<label data-bind="css: {success: $root.getCheckStatus(TicketId, $root.AllAssignedTickets)}">
<input type="checkbox" data-bind="checkedValue: TicketId, checked: $parent.AssignedTickets" />
</label>
</td>
<td>
<label data-bind="text: title"></label>
</td>
self.getCheckStatus = function (itkID, ListID ) {
if (ListID.indexOf(itkID)>= 0)  
return true;
else 
return false;
}

<style>.success{background-color: #DFF0D8;}</style>

因此,系统有多个 TicketID,如果通过选中复选框将其分配给用户,则父级。分配的票证得到更新,我更新根。AllAssignedTickets,两者都是可观察的数组。现在我想更改复选框的标签颜色,该复选框由getCheckStatus(TicketId,$root更新。全部分配票证(。

当选中或取消选中复选框时,是否可以观察到该函数以实时更新 CSS?

它不起作用,因为您将AllAssignedTickets作为参数传递。如果你这样做:

self.getCheckStatus = function (itkID) {
return self.AllAssignedTickets.indexOf(itkID) > -1;
}
<label data-bind="css: { success: $root.getCheckStatus(TicketId) }">

Knockout 将在内部创建订阅,并且可以正常工作。

最新更新