Question

我正在使用Meteor Wordplay示例。我要去的项目是https://github.com/ajcrites/meteor-wordplay

我想要添加的一个功能是没有显示重复的单词，并以红色突出显示重复的单词（为其设置动画）。我通过这个工作了

Meteor.call('score_word', word_id, function (error, result) {
    if (result !== undefined) {
        var bg = $("#word_" + result.id).css('background-color');
        $("#word_" + result.id).css('background-color', 'red');
        //Otherwise transition takes effect *before* BG color is applied
        setTimeout(function () {
            $("#word_" + result.id).css('transition', 'all 2s')
                .css('background-color', bg);
        }, 10);
    }
});

如果有的话，服务器将发回一个重复的单词ID。

这很好用，但问题是任何时候添加一个单词似乎都会重新绘制整个> words模板。我认为这是因为HTML正在改变，因为正在进行的动画，但我也尝试使用CSS来做动画，而且即使没有重复的单词，我可以在控制台中看到整个模板被重绘。 / p>

我之前在Meteor上发现了一个问题，说答案是使用 Meteor Collection 从模板而不是其他一些抽象集合返回，但据我所知，我是：< / p>

Template.words.words = function () {
    return Words.find({game_id: game() && game()._id,
        player_id: this._id});
};

如何停止每次重绘整个> words模板？有没有办法只在模板中添加新单词？
无论＃1的答案是什么，有没有一种方法可以在复制的单词上为红色BG设置动画，即使> words模板更新，也可以让它完成整个动画？

Answer 1

我会尽力回答这个难题，如果我弄错了，请不要贬低我：

我想你现在不能。也许是他们正在构建的下一个渲染系统。
是的，但我认为现有系统并非易事。我有一个游戏，当用户选择一个卡时我需要旋转一张卡片。我所做的就是复制div。一个接收最后一张卡，另一个接收当前卡。因此，使用jQuery我.show（）或.hide（）以及执行动画的.addClass（）。在课堂上我有过渡和其他旋转卡片的东西。

{{#with player_next_card}}
<div id="player-next-card" class="inner-card" style="display: none;">
<!--- stuff here --->
</div>
{{/with}}
{{#with player_last_card}}
<div id="player-last-card" class="inner-card">
<!--- same stuff with other info here --->
</div>
{{/with}}

不要重新加载整个模板

1 个答案: