Question

我是打字稿和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>...

有两个问题：

单击该行会按预期执行selectedItemLogging。但它不会重定向到点击的uri（studentUri或studentSectionUri）。如何更改代码以使重定向行为仍然相同？
目前我正在获取点击行的完整信息。此外，我想知道是否已单击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

将活动从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;
}

typescript：从选定的表行Knockout.js中获取点击数据

1 个答案: