How to set On click event in KnockoutJs

Question

I am new to knockoutjs In my project I have list of Reports. when a user clicks on one of the Reports, The next div(ReportContentdiv) should show all the Sub Reports(SubReportName, SubReportDate, SubReportNote, SubReportType) of the report in tabular format. I dont know how to do it. Any help is greatly appreciated

Here is my code

@@@@@@

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

t's a little difficult to give a precise answer without seeing your javascript model, so I will make some assumptions. Note: I have changed the name $root.Report to $root.Reports, as it is a list the plural makes more sense.

Javascript Model

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>