Question

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

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;
    }

Answer 1

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

您有一个人名单。
该列表中的每个人都有几个属性，例如name和DueDt
对于每个这样的人，可以从到期日开始计算紧急程度（“不久之后”，“以后推迟”，“未知”）。
颜色是该紧急度值的结果。

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

每个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的功能。使用早期版本的Knockout，您可以做到

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

并将isDueSoon和isDueLater计算的布尔属性添加到Person。

Answer 2

如何进行attr绑定

self.highlightRow = function (row) {
        var today = moment(new Date());
        var d = moment(row.DueDtString(), 'MM/DD/YYYY');
        if (d && d.isValid()) {
            if (today.diff(d, 'days') < 10) {
                return 'orange';
            }
            if (today.diff(d, 'days') > 10) {
                return 'melon';
            }
        }
    }

您的tr应该是

<tr data-bind="attr: {class: $root.highlightRow($people)}">

根据条件剔除突出显示行

2 个答案: