Question

我遇到了一个问题，我认为这个问题很简单，但不知何故无法解决。我有一个简单的HTML表格，显示员工列表。该表的最后一列有一个超链接（称为＆＃34;显示附加信息＆＃34;）。当用户点击此链接时，我想在其数据行下方显示有关该特定员工的其他信息。显示所选行的额外内容的逻辑应该是什么？凭借我的逻辑，它使所有行都可见。我们正在使用淘汰框架。

HTML表格

<table id="employees-data" data-bind="if: employeesList().length > 0">
    <tbody data-bind="foreach: employeesList">
      <tr>
        <td data-bind ="text: $index() + 1"></td>
        <td data-bind ="text: moment(dateCreated).format('llll')"></td>
        <td data-bind ="text: empName"></td>
        <td data-bind ="text: empBirthDate"></td>
        <td data-bind ="text: empCity"></td>
        <td><a data-bind="ifnot: additionalInfo == null, attr: { title: additionalInfo},
               click: $parent.toggleAdditionalInfoDisplay">Show Additional Information</a></td>
      </tr>
      <tr><td colspan="6" data-bind="visible: $parent.showAdditionalInfo, text: additionalInfo"></td></tr>
    </tbody>
  </table>

JS档案：

self.showAdditionalInfo = ko.observable(false);
    self.toggleAdditionalInfoDisplay = function() {
        self.showAdditionalInfo(!self.showAdditionalInfo());
        alert('showRow is now ' + self.showAdditionalInfo());
    };

Answer 1

您可以使用knockout mapping插件创建具有属性的员工，以处理该行的visible绑定。

假设您有以下方式来自服务器的数据 -

var dataFromServer = [{
    name: "abc",
    id: 123,
    gender: "female",
    favoriteFood: "Sphagetti"
  }, {
    name: "xyz",
    id: 456,
    gender: "male",
    favoriteFood: "Pasta"
}];

现在，您将从映射插件中创建Employee，如此 -

    var mappingOptions = {
    create: function(options) {
      return new Employees(options.data);
    }
  };

  self.employees = ko.observableArray([]);

  function Employees(data) {
    var self = this;
    if (data !== null) {
      self.name = ko.observable(data.name);
      self.id = ko.observable(data.id);
      self.ifShowAdditionalInformation = ko.observable(false);
      self.favoriteFood = ko.observable(data.favoriteFood);
      self.additionalInfo = "My favorite food is " + self.favoriteFood();
      self.toggleAdditionalInfoDisplay = function() {
        self.ifShowAdditionalInformation(!self.ifShowAdditionalInformation());
      }
    }
  }

  var mappedEmployees = ko.mapping.fromJS(dataFromServer, mappingOptions);

  self.employees(mappedEmployees());

您可以注意到，这如何让您更好地控制各行。 toggleAdditionalInfoDisplay仅针对被点击的行触发，而其他行不受影响。此外，ifShowAdditionalInformation控制其所属行的可见性。

Fiddle

Answer 2

通过以下JS方法解决了这个问题：

query.where().add(Expr.eq(param, value))

HTML：

显示其他信息链接

self.showAdditionalInfo = ko.observable(false);
self.additionalInfoLinkIndex = ko.observable(false);

self.toggleAdditionalInfoDisplay = function(data, event) {
            //get the id of clicked link
            var clickedElementId = event.target.id;

            //if additional info view is already open, showAdditionalInfo is true
            if(self.showAdditionalInfo()) {
                //If current open item index is same as clickedElement index,
                 //then close the view
                if(self.additionalInfoLinkIndex() == clickedElementId) {
                    self.showAdditionalInfo(false);
                    return;
                }
            }
            self.additionalInfoLinkIndex(clickedElementId);
            self.showAdditionalInfo(true);
        };

显示其他信息的行

<td>
          <a style="cursor:pointer;" id="$index()"
            data-bind="ifnot: additionalInfo == null,
            attr: { id: $index(),
            title: additionalInfo}, click: $parent.toggleAdditionalInfoDisplay">View
          </a>
        </td>

Knockout：显示其他信息的HTML表格

2 个答案: