如何在knocckout JS中进行多个绑定

Question

我试图根据条件（应该是流行或非流行或两者兼有）来显示纸剪辑图标，但我想根据另一种条件（是否批准PopStatus）为纸剪辑ICOR上色（是否批准） 。

我正在尝试在相同数据中添加两个条件 有人可以帮我吗？

html：

<td data-bind=" click: $parent.fetchAttachinfo "
                       class="text-center" >
                   

                  <i data-bind="visible: attachmentType=='Non-POP' ,
                   click: function(data,event) {GetPopUpStatus('PopUpApprovalStatus')}, style:{'color':popUpStatus()=='Approved'   ? '#00FF00' : '#ff0000'},i18n: 'service-event.search.result.PopUpApprovalStatus'" class="fa fa-sm fa-paperclip"
                     title="Non-Pop"></i> 
                    <i data-bind="visible: attachmentType=='POP',
                    click: function(data,event) {GetPopUpStatus('PopUpApprovalStatus')}, style:{'color':popUpStatus()=='Approved'   ? '#00FF00' : '#ff0000'},i18n: 'service-event.search.result.PopUpApprovalStatus'" class="fa fa-lg fa-paperclip" title="POP"></i>
                    <i data-bind="visible: attachmentType=='Both' ,
                    click: function(data,event) {GetPopUpStatus('PopUpApprovalStatus')}, style:{'color':popUpStatus()=='Approved'   ? '#00FF00' : '#ff0000'},i18n: 'service-event.search.result.PopUpApprovalStatus'" class="fa fa-lg fa-paperclip"
                        title="POP & Non-Pop"></i>

typescript：

private getPopupStatus（popupstatus：string） {

    if (popUpStatus == "Approved")         
    this.PopUpStatus(popUpStatus);
   
}

Answer 1

不确定这会回答您的问题，但是我会考虑将其中的一些逻辑拉入其自己的视图模型中。这是因为它清理了视图，并允许您编写测试以检查各种条件。

var data = [{
    id: 1,
    name: 'Test 1',
    status: 'Approved',
    attachmentType: 'POP'
  },
  {
    id: 2,
    name: 'Test 2',
    status: 'Pending',
    attachmentType: 'Non-POP'
  },  {
    id: 3,
    name: 'Test 3',
    status: 'Pending',
    attachmentType: 'Both'
  },
];

function AttachmentViewModel(data) {
  var self = this;
  self.id = ko.observable(data.id || null);
  self.name = ko.observable(data.name || '');
  self.popUpStatus = ko.observable(data.status || '');
  self.attachmentType = ko.observable(data.attachmentType || '');
  self.title = ko.computed(function(){
    switch (self.attachmentType()){
      case 'Both': return 'POP & Non-POP';
      default: return self.attachmentType();
      
    }
  });
  self.color = ko.pureComputed(function() {
    switch (self.popUpStatus()) {
      case 'Approved':
        return '#00FF00';
      default:
        return '#ff0000'
    }
  });
};


function ViewModel() {
  var self = this;
  self.attachments = ko.observableArray([]);
  self.fetchAttachinfo = function(item) {
    switch (item.popUpStatus()){
      case 'Pending': 
        item.popUpStatus('Approved');
        break;
      default:
        item.popUpStatus('Pending');
        break;
    }
  }
  
  
  self.attachments(data.map(x => new AttachmentViewModel(x)));
}

ko.applyBindings(new ViewModel());

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table>
  <thead>
    <tr>
      <th>Status</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: attachments">
    <tr>
      <td data-bind=" click: $parent.fetchAttachinfo " class="text-center">
        <i class="fa fa-lg fa-paperclip" data-bind="style:{'color':color}, attr:{title: title}"></i>
      </td>
      <td>
        <span data-bind="text: name"></span>
      </td>
    </tr>
  </tbody>
</table>