계산 된 필드가있는 녹아웃 그리드

단일 계산 된 항목의 온라인 예제를 찾을 수 있지만 다른 필드의 값을 기반으로 계산 된 필드가있는 간단한 녹아웃 표의 예가 있습니까?계산 된 필드가있는 녹아웃 그리드

편집 : 여기에 내가 쓴 일부 코드는,하지만 난 그것에 대해 지금까지 잘못된 방향으로 가고있다 확신합니다 :

<script type="text/javascript" src="@Url.Content("~/Scripts/knockout-2.1.0.js")"></script> 
<script type="text/javascript"> 

    function QBRatingsViewModel() { 
      var self = this; 
      var baseUri = '@ViewBag.ApiUrl'; 
      self.qbratings = ko.observableArray(); 
      this.Interception = ko.observable(); 
      this.Gain = ko.observable(); 

      this.CalculatedRating = ko.computed(function() {   
       return this.Interception() * this.Gain(); 
      }, this); 

      $.getJSON("/api/qbrating", self.qbratings); 
    } 

    $(document).ready(function() { 
     ko.applyBindings(new QBRatingsViewModel()); 
    }); 

    </script> 


<div style="padding-left: 10px;"> 
    <div id="divQBRatings" style="padding-left: 3px; width: 750px;"> 
     <table class="grid" cellspacing="0" cellpadding="0" id="QBRatingsGrid"> 
      <tr class="gridheader"><td style="width: 30px;">Id</td><td width="10" /><td style="width: 40px;">Season</td><td width="10" /><td style="width: 70px;">Team </td><td width="10" /><td style="width: 130px;">Completion </td><td width="10" /><td style="width: 190px;">Gain </td><td width="10" /><td style="width: 30px;">Touchdown </td><td width="10" /><td style="width: 30px;">Interception </td><td width="10" /><td style="width: 30px;">Rating</td><td width="10" /><td></td></tr> 
      <tbody data-bind="foreach: qbratings" class="grid"> 
       <tr> 
        <td><span style="width: 30px;" data-bind="text: $data.Id"></span></td> 
        <td width="10" /> 
        <td><span style="width: 40px;" data-bind="text: $data.Season"></span></td> 
        <td width="10" /> 
        <td><span style="width: 130px;"data-bind="text: $data.TeamName"></span></td> 
        <td width="10" /> 
        <td><span style="width: 190px;" data-bind="text: $data.Completion"></span></td> 
        <td width="10" /> 
        <td><span style="width: 190px;" data-bind="text: $data.Gain"></span></td> 
        <td width="10" /> 
        <td><span style="width: 190px;" data-bind="text: $data.Touchdown"></span></td> 
        <td width="10" /> 
        <td><span style="width: 190px;" data-bind="text: $data.Interception"></span></td> 
        <td width="10" /> 
        <td><span style="width: 190px;" data-bind="text: $data.CalculatedRating"></span></td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div>

출처

2013-01-06 user517406

을, 당신이 무엇을 지금까지 해봤습니까? 그리고 간단한 녹아웃 그리드에서 당신은 [녹아웃 예제 그리드] (http://knockoutjs.com/examples/grid.html)를 의미합니까? – nemesv

계산 된 속성이 관련이 있는지 모르겠다을 항목 또는 전체보기 모델. 이 항목에 관련이있는 경우 다음과 같이해야합니다 :

$.getJSON("/api/qbrating", function (result) { 
    ko.utils.arrayForEach(result, function (item) { 
     item.CalculatedRating = item.Interception * item.Gain; 
    }); 
    self.qbratings(result); 
});

를가 대신 $의 데이터 $ 부모 사용해야 전체 모델에 관련이있는 경우 : 당신이 몇 가지 코드를 게시 할 수

<td><span style="width: 190px;" data-bind="text: $parent.CalculatedRating"></span></td>

출처

2013-01-06 16:49:31

계산 된 필드가있는 녹아웃 그리드

답변

관련 문제