根据其值将样式应用于knockout动态表格中的特定单元格

Question

我没有任何Knockout js的经验，但因为我必须实现这个功能，并且努力掌握这个场景。

JSP文件正在获取JSON数据，并将其传递到HTML模板以创建动态table.But。我必须匹配特定值，并为单元格提供不同的样式(需要更改颜色)。

我研究了一下是否使用了Foreach，并且使用if条件来应用css类是可行的，但是因为表是动态创建的，所以很难实现它。

提供下面的代码，我知道angular的方式来做它，但因为它在击倒JS挣扎。

​

上面的JSON数据从数据库中动态获取，如果App Server正在响应，则映射到“Yes”，否则映射到“No”，另外我必须设置Yes表示绿色，No表示红色。我映射了响应值，它运行良好。但是我不能在Knockout js中设置响应值的颜色(Yes表示绿色，No表示红色)。你能给我提个建议吗？

 <table  id="monitorTable" summary="Table Data Test" aria-label="Table Data Test"
                        contextmenu="empty"
                        data-bind="ojComponent: {component: 'ojTable',
                        data: testdatasource,
                        columnsDefault: {sortable: 'disabled'},
                        columns: tableColumns,
                        scrollPolicy: scrollPolicy,
                        scrollPolicyOptions: scrollPolicyOptions}"></table>

下面是从服务器获取并传递到表的JSOn数据

 {
    "label": "App Server",
    "collection": [{
        "responding": "Yes",
        "appserver": "DEFAULT",
        "className": "success",
        "id": 1
    }, {
        "responding": "No",
        "appserver": "ORACLEQUEUE",
        "className": "failed",
        "id": 2
    }, {
        "responding": "No",
        "appserver": "SECONDARY",
        "className": "failed",
        "id": 3
    }, {
        "responding": "No",
        "appserver": "TERTIARY",
        "className": "failed",
        "id": 4
    }],
    "serverTimestamp": "2017-07-07T03:51:21.949+0000",
    "dataTimestamp": "2017-07-07T03:51:21.949+0000",
    "tableColumns": [{
        "headerText": "App Server",
        "field": "appserver",
        "sortable": "disabled"
    }, {
        "headerText": "Responding",
        "field": "responding",
        "sortable": "disabled",
        "className": ""
    }],
    "scrollPolicy": "auto",
    "scrollPolicyOptions": {
        "fetchSize": "15",
        "maxCount": "1000"
    }
}

下面是通过JSP文件从服务器获取数据的代码

function addScalabilityMonitors() {
            console.log("moved to scalability");
            //App Scalability
            monitors.addMonitorPoint(sts.apiBaseUrl() + 'ScalabilityAppServer1.jsp', 'oj-masonrylayout-tile-3x2', true, 15000, 'grid', 'scalability');
            //Web Scalability
            monitors.addMonitorPoint(sts.apiBaseUrl() + 'ScalabilityWebServer1.jsp', 'oj-masonrylayout-tile-3x2', true, 15000, 'grid', 'scalability');
            //Response Time
            monitors.addMonitorPoint(sts.apiBaseUrl() + 'Scalability.json', 'oj-masonrylayout-tile-3x2', true, 15000, 'gauge', 'scalability');
            //Log files
            monitors.addMonitorPoint(sts.apiBaseUrl() + 'logfile.json', 'oj-masonrylayout-tile-3x2', true, 15000, 'grid', 'scalability');
            monitors.addMonitorPoint(sts.apiBaseUrl() + 'ProcessSchedules.json', 'oj-masonrylayout-tile-3x2', true, 15000, 'grid', 'scalability');
            monitors.addMonitorPoint(sts.apiBaseUrl() + 'BusinessSequence.json', 'oj-masonrylayout-tile-3x2', true, 15000, 'grid', 'scalability');
            monitors.addMonitorPoint(sts.apiBaseUrl() + 'DatabaseJobs.json', 'oj-masonrylayout-tile-3x2', true, 15000, 'grid', 'scalability');
            //myPostProcessingLogic();    
        }

我试着阅读了相关文档，也尝试了各种方法，但都未能实现。

Answer 1

假设您可以访问css，这非常简单。如果不是，那也只是稍微简单一点而已。Knockout有一个专门针对css的数据绑定。下面是一个例子。

​

function Server(data) {
  var self = this;

  self.Name = ko.observable(data.Name);
  self.Status = ko.observable(data.Status);
}

function viewModel() {
  var self = this;

  self.Servers = ko.observableArray();

  self.Load = function() {
    self.Servers.push(new Server({
      Name: "Email",
      Status: "Online"
    }));
    self.Servers.push(new Server({
      Name: "TPS Reports",
      Status: "Offline"
    }));
  };

  self.Load();

}

ko.applyBindings(new viewModel());

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<h3> CSS Control</h3>
<table border=1>
  <thead>
    <tr>
      <th> Server Name</th>
      <th> Server Status</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: Servers">
    <tr>
      <td> <span data-bind="text: Name"> </span> </td>
      <td data-bind="css: { red: Status() == 'Offline', blue: Status() == 'Online' } "> <span data-bind="text: Status"> </span> </td>
    </tr>
  </tbody>
</table>
<br><br><br><br>
<h3> No CSS Control</h3>
<table border=1>
  <thead>
    <tr>
      <th> Server Name</th>
      <th> Server Status</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: Servers">
    <tr>
      <td> <span data-bind="text: Name"> </span> </td>
      <!-- Note: anything with a hyphen must be surrounded in single quotes -->
      <td data-bind="style: { 'background-color': Status() == 'Online' ? 'green' : 'black' } "> <span data-bind="text: Status"> </span> </td>
    </tr>
  </tbody>
</table>

​

使用您的代码，您只需向所讨论的数据绑定添加一些内容。