KnockoutJS - 我们可以为 CSS 更新调用 Observable 函数吗答案

【问题标题】：KnockoutJS - Can we have Observable Function call for CSS updatesKnockoutJS - 我们可以为 CSS 更新调用 Observable 函数吗
【发布时间】：2020-02-09 11:01:18
【问题描述】：

我有一个使用模板在 KnockOut 中编写的票务系统。模板结构如下该模板在一个页面上为多个用户重复。在这个 parent.AssignedTickets 中是分配给用户的 Ticket 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，如果通过选中复选框将其分配给用户，则 parent.AssignedTickets 会被更新，我会更新 root.AllAssignedTickets，这两个都是可观察的数组。现在我想更改由 getCheckStatus(TicketId, $root.AllAssignedTickets) 更新的复选框的标签颜色。

当复选框被选中或取消选中时，是否可以使该函数可观察以实时更新 CSS？

【问题讨论】：

标签： javascript css knockout.js knockout-3.0

【解决方案1】：

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

self.getCheckStatus = function (itkID) {
    return self.AllAssignedTickets.indexOf(itkID) > -1;
}

<label data-bind="css: { success: $root.getCheckStatus(TicketId) }">

Knockout 会在内部创建一个订阅，它会正常工作。

【讨论】：