如何在 KnockoutJs 中设置点击事件答案

【问题标题】：How to set On click event in KnockoutJs如何在 KnockoutJs 中设置点击事件
【发布时间】：2013-05-01 02:03:48
【问题描述】：

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

【问题讨论】：

标签： knockout.js knockout-mvc

【解决方案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>

【讨论】：

它与我要找的很接近。谢谢。

【解决方案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>

【讨论】：