Question

我是淘汰赛的新手在我的项目中，我有报告列表。当用户点击其中一个报告时，下一个div（ReportContentdiv）应该显示所有以表格格式显示报表的子报表（SubReportName，SubReportDate，SubReportNote，SubReportType）。我不知道该怎么做。非常感谢任何帮助

这是我的代码

@@@@@@

--HTML
<div id="ReportNamediv">
<ul class="ulclass">
    <div data-bind="template: {name: 'ReportData',foreach:$root.Report}">
    </div>
</ul>
</div>
<div id="ReportContentdiv">
    //Show Report Content here
</div>

@@@@@@@@

--Script
 <script type="text/html" id="ReportData">
    <li><a href="#"><span data-bind="text: ReportName"></span></a></li>
 </script>

Answer 1

如果没有看到你的javascript模型，给出一个精确的答案有点困难，所以我会做一些假设。注意：我已将名称$ root.Report更改为$ root.Reports，因为它是复数更有意义的列表。

Javascript模型

var model = {
    Reports: ko.observableArray([]), //An observable list of reports...you can set this yourself.
    SelectedReport: ko.observable(null) 
};

<强> HTML

<div id="ReportNamediv">
    <ul class="ulclass" data-bind="foreach:Reports">
          <li>
             <a data-bind="click:$root.SelectedReport">
                      <span data-bind="text: ReportName"></span>
             </a>
         </li>
    </ul>
</div>
<div id="ReportContentdiv" data-bind="with:SelectedReport">
    <table data-bind="foreach:SubReports">
        <tr>
            <td data-bind="text:SubReportName"></td>
            <td data-bind="text:SubReportDate"></td>
            <td data-bind="text:SubReportNote"></td>
            <td data-bind="text:SubReportType"></td>
        </tr>
    </table>
</div>

Answer 2

执行此操作的基本方法是使用SelectedReport observable存储用户选择的报告。然后我们可以利用with:绑定将绑定的上下文专门更改为SelectedReport，这也将处理没有为您优雅选择报告的情况。

您的模型如下所示：

var model = {
   Reports: ko.observableArray(),
   SelectedReport: ko.observable(),
   ViewReport: function(model) {
       this.SelectedReport(model);
   }
};

function Report() {
    var self = this;
    self.Name = ko.observable();
    self.Date = ko.observable();
    self.Note = ko.observable();
    self.Type = ko.observable();
}

然后你的html标记看起来像这样：

<div id="ReportNamediv">
<ul class="ulclass" data-bind="foreach: Reports">
    <li>
         <span data-bind="text: Name()"></span>
         <button data-bind="click: ViewReport">View Report</button
    </li>
</ul>
</div>
<div id="ReportContentdiv" data-bind="with: SelectedReport()">
     <ul>
         <li>
              <label>Name:</label>
              <span data-bind="text: Name()"></span>
         </li>
         <li>
              <label>Date:</label>
              <span data-bind="text: Date()"></span>
         </li>
         <li>
              <label>Note:</label>
              <span data-bind="text: Note()"></span>
         </li>
         <li>
              <label>Type:</label>
              <span data-bind="text: Type()"></span>
         </li>
     </ul>
</div>

如何在KnockoutJs中设置On click事件

2 个答案: