테이블의 열에서 knockout을 사용하여 바인딩하는 방법

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> 

여기 내 녹아웃입니다 :

여기 내이다. 나는 SO가 많은 코드와 적은 세부 사항으로 게시물을 허용하지 않기 때문에 그 부분을 생략했다. mouseover 바인딩을 제거하면 테이블이 정상적으로 실행됩니다. 그 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으로 시작해야합니다. 그렇지 않으면 knockout은 각 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; 
}