Question

在Meteor应用程序中，单击运行的一个函数需要一段时间才能在某些较慢的设备上运行。因此，在这些慢速设备上，应用程序似乎在功能完成后才会执行任何操作。

有问题的函数循环通过一个较大的数组。它不会执行任何外部操作或方法调用。

为了在视觉上提示用户，我想向用户显示一个微调器（在慢速设备上）。理想情况下，我会在事件开始时显示微调器，然后在事件结束时移除微调器。但是，如果我对Meteor的理解是正确的（并且基于我在尝试时发生的事情），则在事件期间指定的所有模板更新仅在事件结束时传播。因此，结果，微调器永远不会显示。

如何按预期进行此项工作？

当前设置（使用实际代码编辑）：

在categories.html中：

                    {{#if hasSubCategories}}
                        <a href='#_' id='categorySelect-{{id}}' class='btn categorySelect pull-right
                            {{#if allSubsSelected}}
                                btn-danger
                            {{else}}
                                btn-success 
                            {{/if}}
                        '>{{#if isFlipping}}<span id='spinner-{{id}}'>flip</span>{{/if}}<span class="glyphicon 
                            {{#if allSubsSelected}}
                                glyphicon-remove
                            {{else}}
                                glyphicon-ok
                            {{/if}}
                        " aria-hidden="true"></span></a>
                    {{/if}}

在categories.js中：

Template.categories.events({
    "click .categorySelect": function (event) {
        Session.set('categorySpinner', this.id);

        categoryFlipper(this.id, function() {
            Session.set('categorySpinner', "");
        });

        return false;
    },
});

Template.categories.helpers({
    allSubsSelected: function() {
        var finder = Categories.find({parentId: this.id});

        var allSelected = true;
        finder.forEach(function(item) {
            if (!($.inArray(item.id, Session.get("categoriesSelected")) !== -1)) {
                allSelected = false;
            }
        });

        return allSelected;
    },
isFlipping: function() {
    if (Session.get("categorySpinner") == this.id)
        return true;
    else
        return false;
}

});

在main.js中：

categoryFlipper = function (id, callback) {
    var finder = Categories.find({parentId: id});

    var allSelected = true;
    finder.forEach(function(item) {
        if (!($.inArray(item.id, Session.get("categoriesSelected")) !== -1)) {
            allSelected = false;
        }
    });

    var t = Session.get("categoriesSelected");

    if (allSelected) {
        finder.forEach(function(item) {
            t.splice($.inArray(item.id, t), 1);
        });
    }
    else {
        finder.forEach(function(item) {
            if (!($.inArray(item.id, t) !== -1)) {
                t.push(item.id);
            }
        });         
    }

    Session.set("categoriesSelected", t);

    callback();
}

Answer 1

查看示例代码（虽然我还没有完整的图片，因为我没有看到allSubsSelected和isFlipping的帮助定义），我很确定你的{ {1}}函数执行得如此之快，以至于你永远不会真正看到微调器。该代码中没有任何内容真正需要花费大量时间。你有一个categoryFlipper电话，但这并不是真正需要花费大量时间的。这是您的find()调用，您通常需要在数据从数据库中提取到浏览器中的mini-mongo客户端时稍微延迟。

这样的事情很常见：

subscribe()

这样，当您的订阅触发发布并向下拉数据时，{{#unless Template.subscriptionsReady}} spinner here... {{else}} Content here. {{/unless}}返回false，并显示微调器。试试这种方法。

如何在活动期间在Meteor中显示微调器

1 个答案: