Как установить событие "При нажатии" в 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>