敲除 JS 以突出显示在数组中选中的标签或行

Question

我有一个使用模板用 KnockOut 编写的票务系统。模板结构如下该模板在一个页面上为多个用户重复。在此 parent.AssignedTickets 中是分配给用户的工单 ID 列表。因此系统有多个 TicketID，如果它被分配给用户则显示已选中。

如果选中复选框，我想更改标签颜色。

<script type="text/html" id="TicketAssignmentTemplate">
    <td>
        <label>
          <input type="checkbox" data-bind="checkedValue: TicketId, checked: $parent.AssignedTickets" />
        </label>
    </td>
    <td>
        <label data-bind="text: title"></label>
    </td>
</script>
<style>.success{background-color: #DFF0D8;}</style>

我尝试了数据绑定标签 css: {success: !$parent.AssignedTickets} 但没有成功。惊喜！不可能那么简单。还有什么我可以尝试的吗？

Answer 1

进一步查看这些问题，不太确定您试图通过使用 $parent.AssignedTasks 可观察数组作为已检查和指示成功的标志来实现什么。不确定以下是否回答了您的问题，但这就是我的处理方式。

希望对您有所帮助

var data = [{
    id: 1,
    title: 'Test 1'
  },
  {
    id: 2,
    title: 'Test 2'
  },
  {
    id: 3,
    title: 'Test 3'
  },
]



var Vm = function() {
  var self = this;
  self.AssignedTickets = ko.observableArray([]);
  var mappedTickets = data.map(function(item) {
    return new Ticket(item);
  })

  self.AssignedTickets(mappedTickets);

}

function Ticket(data) {
  var self = this;
  self.TicketId = ko.observable(data.id);
  self.title = ko.observable(data.title || '');
  self.assigned = ko.observable(false);

}

ko.applyBindings(new Vm());

.success {
  background-color: #DFF0D8;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script type="text/html" id="TicketAssignmentTemplate">
  <td>
    <label data-bind="css: {success: assigned}">
          <input type="checkbox" data-bind="checked: assigned" />
          <span data-bind="text: title"></span>
    </label>
  </td>
  
</script>



<table>
  <tbody data-bind="foreach: AssignedTickets">
    <tr data-bind="template: { name: 'TicketAssignmentTemplate', data: $data }"></tr>

  </tbody>
</table>
<br/>
<ul data-bind="foreach: AssignedTickets">
  <li>ticket with Id :<span data-bind="text: TicketId"></span> is <span data-bind="if: assigned">assigned</span><span data-bind="ifnot: assigned">not assigned</span> </li>
</ul>

敲除 JS 以突出显示在数组中选中的标签或行

Knockout JS to highlight label or row which is checked in an array

javascript

knockout.js