Question

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

我的问题是我无法将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。所以

def main(global_config, **settings):
...
settings['post_configurator_settings'] = {}
config = Configurator(settings=settings,
                     ...
                      root_factory=Root)

...

wsgi_app = config.make_wsgi_app()
settings['post_configurator_settings']['wsgi_app'] = wsgi_app
return wsgi_app

在您的javascript视图模型中，您将拥有

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

在调用jquery对话框函数之前更新observable，如

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

使用Knockout在Dialog Box上的DetailList数据绑定

1 个答案: