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

Question

我是 knockoutjs 的新手在我的项目中，我有报告列表。当用户点击其中一个报表时，下一个 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可观察的来存储用户选择的报告。然后，我们可以利用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>