Javascript typescript：从所选表行Knockout.js获取单击数据

我不熟悉typescript和Knockout.js，需要一些帮助。我创建了一个表，其中包含学生及其分区的详细信息

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)..);
    }
}

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

要将事件从

ko

传播到

native

，请通过单击函数返回

true

单击函数的第二个参数是

event

，因此使用它来确定

event.target

你的点击功能应该是

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

---

一个更正和一个注释：更正：返回类型将是布尔类型，而不是void。注释：为了获得事件类型，我在两个不同的地方注册了两个不同的日志函数。我只需要在单击其中一个字段时进行记录，而不需要在行中的任何其他位置进行记录。

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

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

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

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