使用敲除对话框上的DetailList数据绑定

Question

我正在显示记录列表，每行都有“Details”按钮。如果点击“详细信息”按钮，想要显示电子邮件列表。

我的问题是，我无法将EmailList传递给jquery对话框。它给了我错误。 EmailSubject未定义。

<table class="table table-bordered"> 
<thead> 
<tr> 
    <th>Service</th> 
    <th>Vessel Name</th> 
    <th>Vessel Code</th> 
    <th>Voyage No</th> 
    <th>Origin Port</th> 
    <th>Dest Port</th> 
    <th>Port Call</th> 
    <th>Master ETA</th> 
    <th>FLO ETA</th> 
    <th>Hours to Arrive</th> 
    <th>U/A</th> 
    <th>48 Time</th> 
    <th>Status</th> 
    <th>24 Time</th> 
    <th>Status</th> 
    <th>12 Time</th> 
    <th>Status</th> 
    <th>Last Reminder Sent</th> 
    <th>Email Count</th> 
    <th>Emails</th> 
    <th></th> 
</tr> 
</thead> 
<tbody data-bind="foreach: portApproaches"> 
<tr> 
    <td data-bind="text: serviceName"></td> 
    <td data-bind="text: vesselName"></td> 
    <td data-bind="text: vesselCode"></td> 
    <td data-bind="text: voyageNo"></td> 
    <td data-bind="text: originPort"></td> 
    <td data-bind="text: destPort"></td> 
    <td data-bind="text: portCall"></td> 
    <td data-bind="text: masterETA"></td> 
    <td data-bind="text: floETA"></td> 
    <td data-bind="text: hoursToArrive"></td> 
    <td data-bind="text: overallStatus"></td> 
    <td data-bind="text: timestamp48"></td> 
    <td data-bind="text: status48"></td> 
    <td data-bind="text: timestamp24"></td> 
    <td data-bind="text: status24"></td> 
    <td data-bind="text: timestamp12"></td> 
    <td data-bind="text: status12"></td> 
    <td data-bind="text: reminderSent"></td> 
    <td data-bind="text: emailCounter"></td> 
    <td data-bind="text: emailCounter"></td> 
    <td data-bind="if: emailDtos"><button data-bind="click: openEmailDialog">Emails</button></td> 
</tr> 

</tbody> 

<div id="" style="display:none"> 
<div id="dvtablecontainer"> 
    <table class="table table-bordered"> 
     <thead> 
     <tr> 
      <th>Email Subject</th> 
      <th>Timestamp</th> 
     </tr> 
     </thead> 
     <tbody data-bind="foreach: emailDtos"> 
     <tr> 
      <td data-bind="text:EmailSubject"></td> 
      <td data-bind="text:CreatedOn"></td> 
     </tr> 
     </tbody> 
    </table> 
</div> 

(function() { 
var portApproachViewModel; 

portApproachViewModel = (function() { 
portApproachViewModel.prototype.portApproaches = ko.observableArray(); 

portApproachViewModel.prototype.emailDtos = ko.observableArray([]); 

function portApproachViewModel($, ko) {} 

portApproachViewModel.prototype.updateApproaches = function(paArr) { 
    var pa, _i, _len; 
    if ($.isArray(paArr)) { 
    this.portApproaches.removeAll(); 
    for (_i = 0, _len = paArr.length; _i < _len; _i++) { 
     pa = paArr[_i]; 
     this.portApproaches.push(new BT.Classes.portApproachEntity(ko, pa, this)); 
    } 
    } 
}; 

portApproachViewModel.prototype.openEmailDialog = function(pa) { 
    this.emailDtos.EmailSubject = ko.observable(pa.emailDtos.EmailSubject); 
    this.emailDtos.CreatedOn = ko.observable(pa.emailDtos.CreatedOn); 
    return $('#detailcontainer').dialog({ 
    modal: true, 
    resizable: false, 
    width: 400 
    }); 
}; 

portApproachViewModel.prototype.updateEmails = function(emailArr) { 
    var email, _i, _len; 
    if ($.isArray(emailArr)) { 
    this.emailDtos.removeAll(); 
    for (_i = 0, _len = emailArr.length; _i < _len; _i++) { 
     email = emailArr[_i]; 
     this.emailDtos.push(new ko.observable(emailArr)); 
    } 
    } 
}; 

portApproachViewModel.prototype.clearApproaches = function() { 
    this.portApproaches.removeAll(); 
}; 

return portApproachViewModel; 

})(); 

BT.Classes.portApproachViewModel = portApproachViewModel; 

}).call(this); 

Answer 1

可能是一个很好的办法是你显示的对话框绑定到observableArray和更新observableArray显示对话框之前。所以

<tbody data-bind="foreach: currentDisplayedDialogEmailDtos"> 
    <tr> 
     <td data-bind="text:EmailSubject"></td> 
     <td data-bind="text:CreatedOn"></td> 
    </tr> 
</tbody> 

，并在你的JavaScript视图模型，你将有

portApproachViewModel.prototype.emailDtos = ko.observableArray([]); 
portApproachViewModel.prototype.currentDisplayedDialogEmailDtos = ko.observableArray([]); 

更新，只是调用jQuery的对话框功能像

portApproachViewModel.prototype.openEmailDialog = function(pa) { 

    this.currentDisplayedDialogEmailDtos(pa.emailDtos); 

    return $('#detailcontainer').dialog({ 
    modal: true, 
    resizable: false, 
    width: 400 
    }); 
};