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，并希望与company

中用户的RED相关联的数据

我的用户表中有以下数据

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>

淘汰赛中的条件样式

1 个答案: