Knockout.js 如何在KnockoutJs中设置点击事件

我是个新手 在我的项目中，我有一个报告列表。 当用户单击其中一个报告时， 下一个div（ReportContentdiv）应该显示所有 表格格式的报告的子报告（子报告名称、子报告日期、子报告注释、子报告类型）。 我不知道怎么做。 非常感谢您的帮助

这是我的密码

@@@@@@

--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>

--HTML


//在此处显示报告内容

@@@@@@@@

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

——脚本

t在没有看到您的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>

执行此操作的基本方法是使用可观察的

SelectedReport

存储用户选择的报告。然后我们可以利用

和：

绑定将绑定的上下文专门更改为

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>

查看报告它与我要查找的内容非常接近。非常感谢。