Question

我已经设法在线查找单个计算项目的示例，但是有没有人有一个简单的挖空网格示例，其中的字段是根据其他字段的值计算的？

编辑：这是我编写的一些代码，但我很确定到目前为止我的方法是错误的：

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

Answer 1

我不知道您的计算属性是否与项目或整个视图模型相关。如果它与项目有关，你应该这样做：

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

如果它与整个模型有关，则应使用$ parent而不是$ data：

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

具有计算字段的淘汰网格

1 个答案: