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

Question

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

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>

当前的行为是，当单击 studentName 时，它​​会重定向到 studentUri 页面，当单击 studentSection 时，它会重定向到 studentSectionUri。

我想添加记录点击数据的功能。所以我尝试了这个：

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

在 cshtml 中，我使用 data-bind 在 html 中添加了这个函数，如下所示：

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

有两个问题：

1. 单击该行会按预期执行 selectedItemLogging。但它不会重定向到单击的 uri（studentUri 或 studentSectionUri）。如何更改代码以使重定向行为仍然相同？
2. 目前我正在获取点击行的完整信息。此外，我想知道是否点击了 studentName 或点击了 studentUri 以记录该信息。我怎样才能得到这些信息？

最终答案：我自定义了 Jag 的答案，因为我只需要在单击其中一个字段而不是行中的任何位置时登录。以下是代码：

AllStudentsPageViewModel 类中的函数：

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. 要将事件从ko 传播到native，请从点击函数返回true

2. 点击函数的第二个参数是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;
}