テーブルの列でノックアウトを使用してマウスオーバーをバインドする方法

Question

mouseoverイベントのテーブルの列をバインドしようとしていますが、カーソルが（列ヘッダーではなく）列セルの上にある場合、 （StrTimeDesc）が表示されます。しかし、私はそれを実行すると、それは最初の列（作業日の列）を表示し、残りは空白です。

var Action = 
{ 

    Timesheet_headers: ko.observableArray([]), 
    workDate: ko.observable(), 
    Schedule_description: ko.observable(), 
    StrSchedDesc: ko.observable(), 
    StrTimeDesc: ko.observable(), 
    IsTog: ko.observable(false), 

    detailsEnabled: ko.observable(false), 
    enableDetails: function() { 
     this.IsTog(true); 
    }, 
    disableDetails: function() { 
     this.IsTog(false); 
    } 
} 

はバインディングがすでに行われて適用されます。

<table class="table"> 
    <thead> 
     <tr> 

      <th>Work Date</th> 
      <th>Schedule Description</th> 


     </tr> 
    </thead> 

    <tbody data-bind="foreach: Timesheet_headers"> 
     <tr> 
      <td data-bind="text: workDate"></td> 

      <td> 
       <div data-bind="event: { mouseover: @parent.enableDetails, mouseout: @parent.disableDetails }"> 
        <span data-bind="text: StrSchedDesc"></span> 
       </div> 
       <div data-bind="visible: IsTog"> 
        <span data-bind="text: StrTimeDesc"></span> 
       </div> 
      </td>  

     </tr> 
    </tbody> 
</table> 

はここに私のノックアウトです：

は、ここに私の見解です。私はちょうどそれらの部分を省略したので、多くのコードと詳細が少ない投稿は許可されません。私はマウスオーバーバインディングを削除すると、テーブルが正常に実行されます。そのmouseoverバインディングはknockoutjsサイトから来ました。

UPDATE：ここ は私のクラスは

ある

public class Timesheet_header 
{ 

    [Key] 
    public System.long AUTO_ID { get; set; } 
    public System.Int64 Employee_id { get; set; } 
    public System.Int16 Schedule_id { get; set; } 
    [Required] 
    [DataType(DataType.Date)] 
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)] 
    public DateTime Work_date { get; set; } 

    public string StrSchedDesc { get; set; } 
    public string StrTimeDesc { get; set; } 
    public bool IsTog { get; set; } 

    public Timesheet_header() 
    { 
     IsTog = false; 
    } 
} 

ここでは私のデータアクセスである（これが正常にDBからすべてのレコードを取得する）

public static List<Timesheet_header> GetLogs(long Employee_id, DateTime DateFrom, DateTime DateTo) 
{ 
    var items = new List<Timesheet_header>(); 
    var command = new SqlCommand(); 
    try 
    { 
     command.CommandText = "GetTimeSheetHeaders"; 
     command.CommandType = CommandType.StoredProcedure; 

     command.Parameters.AddWithValue("@Employee_id", Employee_id).Direction = ParameterDirection.Input; 
     command.Parameters.AddWithValue("@DateFrom", DateFrom).Direction = ParameterDirection.Input; 
     command.Parameters.AddWithValue("@DateTo", DateTo).Direction = ParameterDirection.Input; 

     DataTable dt = SqlHelper.GetData(command); 

     if (dt.Rows.Count <= 0) return items; 

     foreach (DataRow row in dt.Rows) 
     { 
      Timesheet_header item = new Timesheet_header(); 

      item.AUTO_ID = (row["AUTO_ID"]).GetLong(); 

      item.Employee_id = (row["Employee_id"]).GetLong(); 

      item.Work_date = (row["Work_date"]).GetDbDate();     

      item.StrSchedDesc = row["Schedule_description"].GetString(); 

      item.StrTimeDesc = " From " + row["Time_from"].GetString() + " - To " + row["Time_to"].GetString(); 

      items.Add(item); 
     } 
    } 
    catch (Exception s) 
    { 
     return new List<Timesheet_header>(); 
    } 

    return items; 
} 

私も

の上に私の見解とノックアウトを更新

Answer 1

enableDetailsおよびdisableDetailsは、の内部にあるので、接頭辞は$parentである必要があります。さもなければノックアウトは各Timesheet_headersオブジェクトの中のそれらの機能を探します。

<tbody data-bind="foreach: Timesheet_headers"> 
    <tr> 
     <td data-bind="text: workDate"></td> 

     <td> 
      <div data-bind="event: { mouseover: $parent.enableDetails, mouseout: $parent.disableDetails }"> 
       <span data-bind="text: StrSchedDesc"></span> 
      </div> 
      <div data-bind="visible: detailsEnabled"> 
       <span data-bind="text: StrTimeDesc"></span> 
      </div> 
     </td>  

    </tr> 
</tbody> 

---

これはまだあなたに期待される結果を与えることはありません。 workDate,Schedule_description,StrSchedDescStrTimeDescおよびIsTogは、Timesheet_headers配列の項目のプロパティである必要があります。 Actionオブジェクトにその必要はありません。

ここにもタイプミスがあります。 Oは、小文字のobservableである必要があります。代わりに

workDate: ko.Observable() 

のあなたは

workDate: ko.observable() 

また

、refer this answerこのfiddleを呼び出す必要があります。あなたの質問と同じです。

Answer 2

これはかなりシンプルなCSSで解決でき、このスタイルの問題からJavaScriptを取り除くことができます。

テーブルにクラスを追加します。 .show-details-on-hover。次に、このCSSルールセット追加：

.show-details-on-hover tbody td:not(:first-child) { 
    display: none; 
} 

.show-details-on-hover tbody tr:hover td:not(:first-child) { 
    display: table-cell; 
}