Aurelia.js: Как мне изменить элемент при изменении значения привязки?

Question

Я использую Aurelia.js для своего интерфейса. Предположим, у меня есть следующая наглядная разметка:

<tr repeat.for="item in items"> 
    <td>${item.name}</td> 
    <td>${item.value}</td> 
</tr> 

которая привязана к модели «предметов». Когда одно из значений в модели изменяется, я хочу анимировать ячейку, где отображается измененное значение. Как я могу это сделать?

Answer 1

Это может быть сделано с Aurelia custom attributes функции.

Создание нового файла JavaScript для описания атрибута (я назвал атрибут «animateonchange»):

import {inject, customAttribute} from 'aurelia-framework'; 
import {CssAnimator} from 'aurelia-animator-css'; 

@customAttribute('animateonchange') 
@inject(Element, CssAnimator) 
export class AnimateOnChangeCustomAttribute { 
    constructor(element, animator) { 
     this.element = element; 
     this.animator = animator; 
     this.initialValueSet = false; 
    } 

    valueChanged(newValue){ 
     if (this.initialValueSet) { 
      this.animator.addClass(this.element, 'background-animation').then(() => { 
       this.animator.removeClass(this.element, 'background-animation'); 
      }); 
     } 
     this.initialValueSet = true; 
    } 
} 

Он принимает элемент и CSS аниматора в конструкторе. Когда значение изменяется, оно анимирует элемент с предопределенным именем класса CSS. Первое изменение игнорируется (нет необходимости анимировать при начальной загрузке). Вот как использовать этот пользовательский элемент:

<template> 
    <require from="./animateonchange"></require> 
    <div animateonchange.bind="someProperty">${someProperty}</div> 
</template> 

Посмотреть полный пример in my blog или on plunkr

Answer 2

Создатель сумасшедшей Aurelia-CSS-аниматор здесь :)

Для того, чтобы сделать то, что вы хотите, вам просто нужно достать DOM-элемент, а затем использовать метод анимировать Аурелии. Поскольку я не знаю, как вы собираетесь редактировать элемент, я просто использовал тайм-аут внутри виртуальной машины, чтобы имитировать его.

attached() { 
    // demo the item change 
    setTimeout(() => { 
    let editedItemIdx = 1; 

    this.items[editedItemIdx].value = 'Value UPDATED'; 
    console.log(this.element); 
    var elem = this.element.querySelectorAll('tbody tr')[editedItemIdx]; 

    this.animator.addClass(elem, 'background-animation').then(() => { 
     this.animator.removeClass(elem, 'background-animation') 
    }); 
    }, 3000); 
} 

Я создал небольшой планшет, чтобы продемонстрировать, как это может работать. Обратите внимание, что это старая версия, не содержащая последний экземпляр аниматора, поэтому вместо анимации я использую addClass/removeClass вместе.

http://plnkr.co/edit/7pI50hb3cegQJTXp2r4m

Также см на официальный блог, с большим количеством намеков http://blog.durandal.io/2015/07/17/animating-apps-with-aurelia-part-1/

Надеется, что это помогает