2013-01-06 51 views
0

我已經成功地在單個計算項目的在線查找示例,但是有沒有人有一個簡單的挖空網格示例,其中的字段是根據其他字段的值計算的?計算字段的敲除網格

編輯:這是我寫了一些代碼,但我敢肯定,我繞了到目前爲止的錯誤的方式:

<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> 
+0

你可以張貼一些代碼,你有什麼嘗試到目前爲止?在簡單的挖空網格上,你是指[knockout example grid](http://knockoutjs.com/examples/grid.html)? – nemesv

回答

0

,如果你的計算特性與我不知道項目或整個視圖模型。如果它涉及到的項目,你應該做這樣的事情:

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

如果您應該使用$父,而不是$ Data的有關整個模型:

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