淘汰赛中的条件样式

Question

我正在研究Asp.Net MVC application，它从SQL table 检索数据并使用knockout JS and Odata 将其显示在页面上。我想根据登录应用程序的用户来控制项目的颜色。

例如，我有以下观点：

table class="clientTable">

    <thead>

        <tr>
            <th>Company</th>
            <th>Grade</th>
            <th>Term</th>
            <th>Location</th>
            <th>Pipeline</th>  
        </tr>

    </thead>
<!--ko foreach: products-->

    <tr>
    <td data-bind="text: Company"></td>
    <td data-bind="text: Grade"></td>
    <td data-bind="text: Term"></td>
    <td data-bind="text: Location"></td>
    <td data-bind="text: Pipeline"></td>

 </tbody>
    <!--/ko-->

上面的脚本只是从表格中拉取数据，并将其放在网页中的一个html表格中。但是我将每个用户分配给Company 及其Id，并且我想要与RED 中用户的company 关联的数据

我的用户表中有以下数据

Id UserName CompanyId
1  demouser  1

公司表有以下内容

Id Company
1  testComp
4   demo

表testData中已经显示给用户的原始数据如下：

Id CompanyId Grade       Term Location Pipeline
1  1         book        Q1   USA      pipe
2  4         electronic  Q2   UK       pipe

当用户demouser登录时，上述数据应在网页上显示如下：

Company  Grade      Term Location Pipeline
testComp Book       Q1   USA      pipe    //This line should be in RED
demo     Electronic Q2   UK       pipe

除了显示与使用 Knockout Js 登录的用户关联的 company 数据外，我能够提取所有数据，如下所示

self.getverticaldata = function () {
        $.ajax({
            dataType: "json",
            url: '/odata/CC',
            data: ko.toJSON(self.products),
            async: false,
            success: function (data) {
                self.datainput((ko.utils.arrayMap(data.value, function (ccrd) {
                    var obsCCrude = {
                        Id: ccrd.Id,
                        CompanyId: ccrd.CompanyId,
                        Grade: ko.observable(ccrd.Grade),
                        Term: ko.observable(ccrd.Term),
                        Product: ccrd.Product,
                        Location: ko.observable(ccrd.Location),
                        Pipeline: ko.observable(ccrd.Pipeline),

                    }

                    return obsCCrude;
                })));
            }
        });
    }

    this.getverticaldata();

有没有更好的方法可以实现这一目标？

Answer 1

您可以使用 Knockout's Style Binding 来使用条件格式。

这是一个简单的用法示例，它将id == 2 的字体颜色设置为红色，否则为绿色：

<span data-bind="text: id, style: { color: id == 2 ? 'red' : 'green' }"></span>

你可以在里面放任何你需要的逻辑。

以下是工作示例：

var viewModel = function() {
  var self = this;

  self.users = ko.observableArray([{
    id: 1,
    company: 'Company x'
  }, {
    id: 2,
    company: 'Company y'
  }, {
    id: 3,
    company: 'Company z'
  }]);

};

ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="foreach: users">
  <p>
  <span data-bind="text: 'ID: ' + id, style: { color: id == 2 ? 'red' : 'green' }"></span><br>
  <span data-bind="text: 'CO: ' + company, style: { color: id == 2 ? 'red' : 'green' }"></span>
    </p>
<div>