Question

我想创建一个小的管理前端，我可以在其上显示所有用户的列表并编辑用户数据（如角色）。所以我到目前为止所做的是创建一个新的出版物（allUsers）并创建用于显示和更改用户角色的方法：

共享/ collections.js

Users = Meteor.users;

server.js

Meteor.methods({
    'updateRole': function(userId, role, value) {
        if (value) Roles.addUsersToRoles(userId, role);
        else Roles.removeUsersFromRoles(userId, role);
        return userId;
    },
    'loadRoles': function(userId, role) {
        var result = { role: role, value: Roles.userIsInRole(userId, role) };
        return result;
    }
});

Meteor.publish('allUsers', function(){
    return Users.find();
});

router.js

Router.route('/users', {
    name: 'users',
    waitOn: function () {
        Meteor.subscribe('allUsers');
    },
    data: function() {
         return {
            users: Users.find({})
         }
    }
});

Router.route('/user/:_id', {
    name: 'userEdit',
    waitOn: function () {
        Meteor.subscribe('allUsers');
        Session.set("userEditId", this.params._id);
    },
    data: function () {
        return { 
            users: Users.findOne({ _id: this.params._id })
        };
    }
});

client.js

Template.userEdit.onRendered(function() {
    var role,
        userId = Session.get("userEditId"),
        elements = document.getElementById('formRoles').elements;

    for(var i = 0; i < elements.length; i++) {
        var dom = elements[i];
        if(dom.getAttribute('type') == 'checkbox') {
            role = dom.getAttribute('name');
            Meteor.call('loadRoles', userId, role, function (error, result) {
                $("input[name=" + result.role + "]").prop('checked', result.value);
            });
        }
    }
});

Template.userEdit.events({
    'change input[type="checkbox"]': function(event) {
        var userId = document.getElementById('formRoles').getAttribute('data-id'),
            role = event.target.getAttribute('name');
            value = event.target.checked,

        Meteor.call('updateRole', userId, role, value, function (error, result) {
            console.log(result);
        });
    }
});

模板

<template name="users">
    <ul class="list">
        {{#each users}}
            <li><a href="/userEdit/{{_id}}">{{profile.name}}, {{profile.surname}}</a></li>
        {{/each}}
    </ul>
</template>

<template name="userEdit">
    <h1>{{users.profile.name}}, {{users.profile.surname}}</h1>
    {{#if isInRole 'admin'}}
        <form id="formRoles" data-id="{{users._id}}">
            <label><input type="checkbox" name="admin"> Administrator</label>
            <label><input type="checkbox" name="role2"> Role</label>
            <label><input type="checkbox" name="role3"> Role</label>
            <label><input type="checkbox" name="role4"> Role</label>
            <label><input type="checkbox" name="role5"> Role</label>
        </form>
    {{/if}}
</template>

更新

这是我在列表中显示所有用户并显示所选用户的所有角色的方式。问题是，显示器分两步延迟：这意味着，当加载页面时，首先只有一个用户，并且在一秒之后，所有其他用户都被添加到列表中。与userEdit相同：首先我只看到＆＃34;，＆＃34;一秒后，它被填充到＆＃34;姓名，名字＆＃34;。

有人可以向我解释这种行为吗？我如何改进代码以避免这两个步骤？

由于＆＃34;两步显示＆＃34;，我认为我编写的代码很复杂......

更新2

我认为延迟是由route-waitOn中所有用户的订阅引起的。是否有可能改善这一点？

Meteor：构建管理员前端来管理用户 - 延迟显示数据

0 个答案: