Переопределить ractivet.set с помощью ractive.animate для определенного пути к клавише.

Я пишу карточную игру, и состояние игры поступает с сервера через веб-сокет. Когда клиент получает состояние игры, я вызываю ractive.set('game', game).

Внутри игрового объекта находится список пользователей, у которых есть деньги. Когда их деньги меняются, я хочу, чтобы цифры оживали, поэтому я пишу:

ractive.observe('game.seats.*.money', function(money, oldmoney, keypath) {
    ractive.animate(keypath, money);
})

К сожалению, это не работает. Я думаю, это потому, что к тому времени, когда я наблюдаю за обновлением, состояние игры уже было установлено на новое значение, а затем анимация с новым значением ничего не значила.

Есть ли способ добиться эффекта, который я ищу?


javascript ractivejs
person Mark    schedule 05.06.2015    source источник

Ответы (1)


arrow_upward
3
arrow_downward

FWIW Ractive имеет возможность анимировать иерархию объектов, поэтому вы можете вызвать ractive.animate("game', game). См. http://jsfiddle.net/hj568b0m/.

Но предполагая, что вы не хотите анимировать другие части модели, вы можете использовать наблюдатель (который срабатывает перед обновлением DOM), чтобы установить значение обратно, а затем анимировать его:

var animating = []
r.observe('game.seats.*.money', function(money, oldmoney, keypath, index) {
    // the animation update will re-enter the observer,
    // so bail if we are animating this index...
    if ( animating[index] ) { return; }

    animating[index] = true;
    r.set(keypath, oldmoney);   
    r.animate(keypath, money).then(function(){
        animating[index] = false;
    });
});

См. http://jsfiddle.net/tyyfmosr/.

person martypdx    schedule 05.06.2015