如何在Breeze中创建一个“加载”微调器？

Question

我正在尝试创建一个加载微调器，当微风与服务器通信时将显示该加载微调器。只有当微风将数据发送到服务器，接收数据或等待响应时（例如，在进行了异步调用但尚未响应之后），Breeze中是否存在“真实”属性？我想把这个数据绑定到一个可挖掘的可观察对象并将微调器绑定到这个可观察对象，

谢谢，

Elior

Answer 1

使用spin.js

http://fgnass.github.io/spin.js/

它如此简单..在执行查询之前使其可见，并在查询成功或失败后将其禁用。

Answer 2

在Breeze查询时，我没有看到任何设置或可观察的属性，但如果您使用datacontext或某些JavaScript模块进行数据调用，那么您可以这样做 -

修改

考虑到John的评论，我添加了一种跟踪每个查询的令牌方式。

    var activeQueries = ko.observableArray();

    var isQuerying = ko.computed(function () {
        return activeQueries().length !== 0;
    });

    var toggleQuery = function (token) {
        if (activeQueries.indexOf(token) === -1)
        { activeQueries.push(token); }
        else { activeQueries.remove(token); }
    };

    var getProducts = function (productsObservable, forceRemote) {
        // Don't toggle if you aren't getting it remotely since this is synchronous
        if (!forceRemote) {
            var p = getLocal('Products', 'Product','product_id'); 
            if (p.length > 0) {
                productsObservable(p);
                return Q.resolve(); 
            }
        }

        // Create a token and toggle it
        var token = 'products' + new Date().getTime();
        toggleQuery(token);

        var query = breeze.EntityQuery
            .from("Products");

        return manager.executeQuery(query).then(querySucceeded).fail(queryFailed);

        function querySucceeded(data) {
            var s = data.results;
            log('Retrieved [Products] from remote data source', s, true);
            // Toggle it off
            toggleQuery(token);
            return productsObservable(s);
        }
    };

您还需要确保所有失败逻辑都切换查询。

然后在您的视图中放置微调器

var spinnerState = ko.computed(function () {
    datacontext.isQuerying();
};