打字稿：从选定的表格行Knockout.js获取点击数据

Question

I am new to typescript and Knockout.js and need a little help. I have created a table that has details of students and their sections.

AllStudentsPageViewModel.ts:

interface StudentTableRow {
    studentName: string,

    studentUri: string,

    studentSection: StudentSummaryUtility.SimplifiedSection;

    studentSectionUri: string;
}

export default class AllStudentsPageViewModel implements ViewModel {
    public rows: KnockoutObservableArray<StudentTableRow>;

    constructor() {
        this.rows = KnockoutUtility.computedArray(...(logic involving observables)..);
    }
}

AllStudentsPage.cshtml:

<script type="text/html" id="AllStudentsPage">
    <div id="all-students-grid" class="vertical-content">
        <div class="all-students-page-title">
            All students
        </div>
        <table id="all-students-datatable-grid" class="row-border hover" width="100%">
            <thead>
                <tr>
                    <th>
                        Student Name
                    </th>
                    <th>
                        Section
                    </th>
                </tr>
            </thead>
            <tbody>
                <!-- ko foreach: rows -->
                <tr>
                    <td>
                        <a data-bind="text: studentName, attr: { href: studentUri }"></a>
                    </td>
                    <td>
                        <a data-bind="attr: { href: studentSectionUri }" class="all-students-section-column">
                            <!-- ko with: studentSection -->
                                <span data-bind="text: text" />
                                <!-- ko with: icon -->
                                <div class="all-students-section-icon" data-bind="visible: SectionA">
                                    @{ Html.RenderPartial("~/Views/Partial/Svg/SectionA.cshtml"); }
                                </div>
                                <div class="all-students-section-icon" data-bind="visible: SectionB">
                                    @{ Html.RenderPartial("~/Views/Partial/Svg/ErrorCircle.cshtml"); }
                                </div>
                                <div class="all-students-section-icon" data-bind="visible: SectionC">
                                    @{ Html.RenderPartial("~/Views/Partial/Svg/SectionC.cshtml"); }
                                </div>
                                <!-- /ko -->
                            <!-- /ko -->
                        </a>
                    </td>
                </tr>
                <!-- /ko -->
            </tbody>
        </table>
    </div>
</script>

The current behavior is such that when a studentName is clicked, it redirects to the studentUri page and when studentSection is clicked, it redirects to the studentSectionUri.

I want to add functionality to log the click data. So I tried this:

export default class AllStudentsPageViewModel implements ViewModel {
    public rows: KnockoutObservableArray<StudentTableRow>;

    public selectedItemLogging = function (studentTableRow: StudentTableRow): void {
        const loggingData = {
            studentName: studentTableRow.studentName,
            studentSection: studentTableRow.studentSection
        }

        Logging.trace("RowSelected", loggingData);
    }

    constructor() {
        this.rows = KnockoutUtility.computedArray(...(logic involving observables)..);
    }
}

In the cshtml, I added this function in the html using data-bind like this:

            ...
            <!-- ko foreach: rows -->
            <tr data-bind="click: $parent.selectedItemLogging">
                <td>
                    <a data-bind="text: studentName, attr: { href: studentUri }"></a>...

There are two issues:

1. Clicking the row executes the selectedItemLogging as expected. But it is not redirecting to the clicked uri(either studentUri or studentSectionUri). How can the code be changed such that the redirect behavior is still the same?
2. Currently I am getting the complete information of the row clicked. Additionally, I want to know whether the studentName has been clicked or whether the studentUri has been clicked to log that information. How can I get this information?

Final answer: I customized Jag's answer since I only had to log only when one of the fields is clicked and not anywhere in the row. Following is the code:

Functions in AllStudentsPageViewModel class:

public selectedStudentNameLogging = function (studentTableRow: StudentTableRow): boolean {
    const loggingData = {
        studentName: studentTableRow.studentName,
        studentSection: studentTableRow.studentSection,
        selectedField: "studentName"
    }

    Logging.trace("RowSelected", loggingData);

    return true;
}

public selectedStudentSectionLogging = function (studentTableRow: StudentTableRow): boolean {
    const loggingData = {
        studentName: studentTableRow.studentName,
        studentSection: studentTableRow.studentSection,
        selectedField: "studentSection"
    }

    Logging.trace("RowSelected", loggingData);

    return true;
}

Html:

        <tbody>
            <!-- ko foreach: rows -->
            <tr>
                <td>
                    <a data-bind="text: studentName, attr: { href: studentUri }, click: $parent.selectedStudentNameLogging"></a>
                </td>
                <td>
                    <a data-bind="attr: { href: studentSectionUri }, click: $parent.selectedStudentSectionLogging" class="all-students-section-column">
                        <!-- ko with: studentSection -->
                            <span data-bind="text: text" />

Answer 1

1. to propagate the event from ko to native , return true from the click function

2. click function's second argument is event so use that to determine event.target

your click function should be like

public selectedItemLogging = function (studentTableRow: StudentTableRow, event): void {
    const loggingData = {
        studentName: studentTableRow.studentName,
        studentSection: studentTableRow.studentSection
    }
    // use event.target to find out which link got clicked 
    var clickedUri = event.target.href;

    Logging.trace("RowSelected", loggingData);

    // this will propagate the event    
    return true;
}