0

我现在正在使用 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，服务器将发回一个重复的单词 ID。

这很好用，但问题是任何时候添加一个词，似乎整个> words模板都被重绘了。我认为这是因为 HTML 正在发生变化，因为动画正在发生，但我也尝试使用 CSS 来代替动画，即使没有重复的单词，我也可以在控制台中看到整个模板被重绘。

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

Template.words.words = function () {
    return Words.find({game_id: game() && game()._id,
        player_id: this._id});
};
  1. 如何阻止> words每次重绘整个模板？有没有办法只在模板中添加新词？
  2. 无论#1 的答案如何，有没有一种方法可以让重复单词上的红色 BG 动画，并让它通过完整的动画，即使> words模板已更新？
4

1 回答 1

0

我将尝试回答这个难题，如果我弄错了，请不要对我投反对票：

  1. 我认为你现在不能。也许在他们正在构建的下一个渲染系统上。
  2. 是的，但我认为这在当前系统中并非微不足道。我有一个游戏，当用户选择一张卡片时，我需要轮换一张卡片。我所做的是复制 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}}
于 2013-06-07T02:33:12.133 回答