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

Posted 2023-03-27

【中文标题】KnockoutJS - 我们可以为 CSS 更新调用 Observable 函数吗

【英文标题】：KnockoutJS - Can we have Observable Function call for CSS updates

【发布时间】：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>.successbackground-color: #DFF0D8;</style>

所以系统有多个 TicketID，如果通过选中复选框将其分配给用户，则 parent.AssignedTickets 会被更新，我会更新 root.AllAssignedTickets，这两个都是可观察的数组。现在我想更改由 getCheckStatus(TicketId, $root.AllAssignedTickets) 更新的复选框的标签颜色。

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

【问题讨论】：

【参考方案1】：

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

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


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

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