时间戳

首页 > 解决方案 > 根据条件淘汰突出显示行

knockout.js - 根据条件淘汰突出显示行

问题描述

我正在尝试完成以下代码以根据条件突出显示行 

self.highLightRow = function (row) {
   var today = moment(new Date());
   if (row.DueDt() !== '') {
        var d = moment(row.DueDt(), 'MM/DD/YYYY');
        if (d && d.isValid()) {
       if (today.diff(d, 'days') < 10) {
       return '#FFA500';
    }
    else if (today.diff(d, 'days') > 10) {
        return '#fdbcb4';
    }
  }
  else {
    return '#FFFFFF';
}
}
else {
 return '#FFFFFF';
}
    }

没有按预期工作，我的表格如下

<table>
    <tbody data-bind="foreach: people">
    <tr data-bind="css :{ colorRow:highLightRow ($people) }">
        <td data-bind="text: name"></td>
        <td data-bind="text: DueDt"></td>
    </tr>
    </tbody>
</table>

当我编写 3 个不同的条件并绑定时，它正在工作

<table>
    <tbody data-bind="foreach: people">
    <tr data-bind="css :{ white:$root.noColor($people) }">
        <td data-bind="text: name"></td>
        <td data-bind="text: DueDt"></td>
    </tr>
    </tbody>
</table>

我希望它具有单一功能。

$(document).ready(function () {
window.peopleVM= new peopleViewModel();
window.peopleVM.Init();
});
function peopleViewModel() {
     var self = this;
     self.employeeList = ko.observableArray();
     self.Init = function () {
     ko.applyBindings(self, $("#myDiv")[0]);
    }
}

我正在进行 ajax 调用来加载数据，如下所示

self.LoadEmployees = function () {
        self.IsLoaded(false);
        var jqxhr = $.get(
            window.WebApiBase + "GeData",
            function (data) {
                self.IsLoaded(true);
                if (data && data.length > 0) {
                    $.each(data, function (index, item) {
                        if (item) {
                            self.employeeList.push(ko.mapping.fromJS(item));
                        }
                    });
                    self.IsLoading(false);
                }
                else {
                    self.IsLoading(false);
                }
            })
        .fail(function (jqXHR, status, errorThrown) {

        });
        return jqxhr;
    }

标签： knockout.js

解决方案

您仍在以命令式的方式考虑 Knockout（即“我需要在 jQuery 中做什么？”）。那没有帮助。不要试图“为每一行调用一个函数”，而是想“计算一个值并将视图绑定到它”。

  1. 你有一个人的名单。
  2. 该列表中的每个人都有几个属性，例如name和DueDt
  3. 对于每个这样的人，可以从到期日计算紧迫性（“即将到期”、“稍后到期”、“未知”）。
  4. 行颜色是该紧迫性值的结果。

1 和 2 是数据模型的基本属性。3 由视图模型提供。4 在视图中通过 CSS 处理。

当每个Person对象计算自己的urgency值时：

// viewmodel for a single person
function Person(data) {
  var self = this;
  
  self.name = data.name;
  self.DueDt = data.DueDt;
  self.isSelected = ko.observable(false);
  self.urgency = ko.pureComputed(function () {
    var d = moment(self.DueDt, 'MM/DD/YYYY');
    if (d.isValid()) {
      return d.diff(moment(), 'days') < 10 ? 'dueSoon' : 'dueLater';
    }
  });
}

// viewmodel for the overall list of people
function PersonList(data) {
  var self = this;
  
  self.people = ko.observableArray(data.people.map(function (p) {
    return new Person(p);
  }));
}

// sample data and viewmodel binding
var dataFromServer = {
  people: [
    {name: 'John Doe', DueDt: moment().add(20, 'days').format('MM/DD/YYYY')},
    {name: 'Jane Doe', DueDt: moment().add(5, 'days').format('MM/DD/YYYY')},
    {name: 'Jon Snow', DueDt: ''},
  ]
};
var vm = new PersonList(dataFromServer);
ko.applyBindings(vm);
table { border-collapse: collapse; }
td { padding: 3px; }
tr.dueSoon { background-color: #FFA500 }
tr.dueLater { background-color: #fdbcb4 }
tr.selected { background-color: red!important; color: white }
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-debug.js"></script>

<table>
  <thead>
    <tr>
      <td></td>
      <td>Name</td>
      <td>Due Date</td>
      <td>Selected</td>
      <td>Urgency</td>
    </tr>
  </tbody>
  <tbody data-bind="foreach: people">
    <tr data-bind="class: urgency, css: {selected: isSelected}">
      <td><input type="checkbox" data-bind="checked: isSelected"></td>
      <td data-bind="text: name"></td>
      <td data-bind="text: DueDt"></td>
      <td data-bind="text: isSelected"></td>
      <td data-bind="text: urgency"></td>
    </tr>
  </tbody>
</table>

...然后视图变得非常简单明了。

请注意，class绑定是 Knockout 3.5.0 的一项功能。使用早期版本的淘汰赛你可以做

<tr data-bind="{selected: isSelected, dueSoon: isDueSoon, dueLater: isDueLater}">

并将计算的布尔属性添加isDueSoon到.isDueLaterPerson

推荐阅读