强制流星刷新/重新渲染模板?

时间:2014-12-08 02:58:54

标签: javascript meteor

*作为参考我使用铁路由器。

而不是登录页面我将此全局登录表单嵌入导航(也就是每页上)。 现在,当用户登录时,我正在做一个非常hacky的刷新来重新加载页面。

我想重新加载到模板,而不是刷新整个页面。 基本上只是希望模板渲染功能在登录时重新运行。

这是我当前的登录代码:

'submit #login': function(event, template){
    event.preventDefault();
    var handle = template.find('#usernameLogin').value;
    var secretKey = template.find('#passwordLogin').value;
    Meteor.loginWithPassword(handle, secretKey, function(err){
        if (err) {
            alert(err);
        }else{
            $('#close').click();
            /* replace this with reactive ajax or whatever when you can! */
            Meteor._reload.reload();
        }
    });
},

我认为我的渲染功能现在可能是真正的问题:

Template.tournament.rendered = function () {
    thisCampaign = this.data;
    var self = this;

    if (this.data.tournament.live) {

        /* if theres a registered user */
        if (Meteor.userId()) {

            /* Select a winner box */
            var participants = $('.participant-id');
            var currentParticipant;
            var nextRound;
            var thisMatch;
            var nextMatch;
            var bracket;
            participants.map(function(index, value){
                if ($(value).text() === Meteor.userId()) {
                    if ($(value).parent().find('.participant-status').text() === 'undetermined') {
                        nextRound = $(value).parent().find('.participant-round').text();
                        thisMatch = $(value).parent().find('.participant-match').text();
                        bracket = $(value).parent().parent().parent().find('.participant');
                    };
                };
            });
            nextRound = parseInt(nextRound) + 1;
            nextMatch = Math.round(parseInt(thisMatch)/2) - 1;
            if (parseInt(thisMatch) % 2 != 0) {
                currentParticipant = 0;
            }else{
                currentParticipant = 1;
            }
            var winnerOptions = '';
            var winnerBox = $('<div class="select-winner">');
            if (bracket) {
                bracket.map(function(index, value) {
                    winnerOptions += '<span class="winner-option"> '+$(value).find('.participant-title').text()+' <div class="winner-info"> '+$(value).find('a').html()+' </div> </span>'
                });
                winnerBox.append(winnerOptions);
                $($($('.round'+nextRound).find('li')[nextMatch]).find('.participant')[currentParticipant]).removeClass('loser').addClass('undetermined');
                $($($('.round'+nextRound).find('li')[nextMatch]).find('.participant')[currentParticipant]).find('a').addClass('tooltip').html(winnerBox);
            };

        }else{

        }

    }else{
        /* Tournament Start Time */

        var tournamentStartTime = function(){
            var d = new Date();
            var n = d.getTime();
            var currentTime = TimeSync.serverTime(n);
            var startTime = self.data.card.startTime;
            var difference = startTime - currentTime;
            var hoursDifference = Math.floor(difference/1000/60/60);
            difference -= hoursDifference*1000*60*60
            var minutesDifference = Math.floor(difference/1000/60);
            difference -= minutesDifference*1000*60
            var secondsDifference = Math.floor(difference/1000);
            /* if ends (make tournament live server side?) */
            if (hoursDifference < 0 || minutesDifference < 0 || secondsDifference < 0) {
                Meteor.clearInterval(tStartTime);
                Session.set("tournamentStartTime", false);
            }else{
                if (hoursDifference   < 10) {hoursDifference   = "0"+hoursDifference;}
                if (minutesDifference < 10) {minutesDifference = "0"+minutesDifference;}
                if (secondsDifference < 10) {secondsDifference = "0"+secondsDifference;}
                var formattedTime = hoursDifference + ':' + minutesDifference + ':' + secondsDifference;
                Session.set("tournamentStartTime", formattedTime);
            }
        };
        Session.set("tournamentStartTime", '00:00:00');
        tournamentStartTime();
        var tStartTime = Meteor.setInterval(tournamentStartTime, 1000);

        /* Allow new user sign up */
        var alreadySignedUp = false;
        var usersSignedUp = $('.participant-id')
        usersSignedUp.map(function (index, user) {
            if ($(user).text().trim() === Meteor.userId()) {
                alreadySignedUp = true;
            }
        });

        if (this.data.card.host != Meteor.user().username && !(alreadySignedUp)) {
            var openSlots = [];
            var allSlots = $('.participant');
            allSlots.map(function (index, participant) {
                if ($(participant).find('.participant-title').text().trim() === '' && !($(participant).hasClass('loser'))) {
                    openSlots.push(participant);
                }
            });
            openSlots.map(function (openSlot, index) {
                $(openSlot).removeClass('winner').addClass('undetermined');
            });
        }

        /* if theres a registered user */
        if (Meteor.userId()) {

        }else{

        }

    }
};

1 个答案:

答案 0 :(得分:1)

从我在那里看到的,你的渲染函数不会像你期望的那样工作,因为模板可能会在loggingIn状态仍然存在时呈现...

我的建议是使用类似{{#if currentUser}} page here{{/if}}的内容,然后将您尝试运行的代码放在currentUser块内的帮助器中,只显示它如果有登录用户,则调用,否则它将不会显示,您不需要重新呈现页面以执行任何操作。

基本上一旦用户登录,任何调用了Meteor.userId()Meteor.user()函数的帮助程序(除了渲染)将自动重新运行,否则您可以在{ {1}}功能,如果它们是每个客户的应用程序的全局。