Question

我使用Knockout创建了一个非常简单的数据加载示例。我想要做的是添加一个加载图标，以便在加载数据时显示。任何人都可以告诉我使用下面的例子的正确语法吗？

    <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();

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

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

  </script>

        <div class="page" id="page-index">
    <div class="page-region">
        <div class="page-region-content">
            <div class="grid">
                <div class="row">
                    <div class="span4">
                                    <h3>QB Ratings (up to week 12)</h3>
                                    <div id="divLoading">
                                        <table class="bordered">
                                            <thead>
                                                <tr style="background-color:#f1f1f1">
                                                    <td>Team</td>
                                                    <td>Comp %</td>
                                                    <td>Av Gain</td>
                                                    <td>TD %</td>
                                                    <td>Int %</td>
                                                    <td>Rating</td>
                                                </tr>
                                            </thead>
                                            <tbody data-bind="foreach: qbratings">
                                                <tr class="qbrating">
                                                    <td><span data-bind="text: $data.TeamName"></span></td>
                                                    <td><span data-bind="text: $data.Completion"></span></td>
                                                    <td><span data-bind="text: $data.Gain"></span></td>
                                                    <td><span data-bind="text: $data.Touchdown"></span></td>
                                                    <td><span data-bind="text: $data.Interception"></span></td>
                                                    <td><span data-bind="text: $data.CalculatedRating"></span></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Answer 1

虽然这不是您的具体示例，但这是一种可用于显示任何类型的加载指示器的技术：

http://jsfiddle.net/wiredprairie/Uq8VJ/

重要的部分是在视图模型中切换可观察对象的状态，然后可以触发可见性绑定以隐藏或显示加载指示符。

var vm = {
    isLoading: ko.observable(false),
    loadData: function () {
        var self = this;
        self.isLoading(true);
        $.getJSON("/echo/json?json={}&delay=2")
            .success(function () {
            // success!
        })
            .complete(function () {
                // always remove the loading, regardless of load/failure
            self.isLoading(false);
        });
    }
};

ko.applyBindings(vm);

HTML：

<div id='container'>
    <div>always showing</div>
    <div id='loading' data-bind="visible: isLoading">Loading...</div>
</div>
<div>
    <button data-bind="click: loadData">Simulate Load</div>
</div>

向Knockout javascript添加加载图标

1 个答案: