У меня нет опыта в Knockout js, но поскольку я должен реализовать функциональность и изо всех сил пытаюсь понять этот сценарий.
JSP файлы извлекают данные JSON и передаются в шаблон HTML для создания динамической таблицы. Но мне нужно сопоставить определенные значения и давать разные стили для ячеек (нужно изменить цвет).
Я исследовал и выяснил, используется ли Foreach и использует ли это условие для применения класса css, но поскольку таблица создается динамически, поэтому трудно достичь этого.
Предоставляя код ниже, я знаю угловой способ сделать это, но с тех пор, как он в нокауте JS борется.
Вышеуказанные данные JSON динамически извлекаются из БД, если App Server отвечает, а затем отображает "Да", в противном случае отображается "Нет", кроме того, мне нужно установить "Да" зеленый цвет, "Нет" означает "Красный цвет". Я сопоставлял отвечающие ценности, он работает нормально. Но я не могу установить цвета для отвечающих значений (Да означает зеленый и Нет означает красный цвет) в Knockout js. Можете ли вы предложить мне об этом
<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();
}
Я попытался прочитать документацию для этого, также попробовал разные вещи, но не смог реализовать.
Предполагая, что у вас есть доступ к css, это довольно просто. Если нет, то это немного просто. Нокаут имеет привязку данных для 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>
С вашим кодом вы просто внесете некоторые дополнения в привязку данных.