typescript：从选定的表格行获取点击数据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。

我想添加功能来记录点击数据。所以，我想这一点：

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

这里有两个问题：

1. 点击

   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，我使用数据绑定这样加在html此功能行按预期执行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. cl ICK函数的第二个参数是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; 
}