1

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

1 に答える 1

17

これは具体的な例ではありませんが、これはあらゆる種類の読み込みインジケーターを表示するために使用できる手法です。

http://jsfiddle.net/wiredprarie/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>
于 2013-02-10T15:27:55.133 に答える