Выделите последний вставленный документ в Meteor

Question

У меня есть вид и список объектов на той же странице. Когда я вставляю новую строку, не так просто увидеть, где находится новая вставленная строка. Поэтому я думал, что могу выделить/выделить недавно вставленную строку (и, возможно, удалить подсветку через несколько секунд).

Как я могу это сделать? Я думаю, что способ сделать это можно с помощью метода на сервере, который возвращает вставленный идентификатор (return Collection.insert(doc);) и на клиенте с помощью обратного вызова с

Meteor.call('insertDoc', function(err,result) { 
    // do something with result 
}); 

Я думаю, что я могу использовать reactive-var, чтобы сохранить идентификатор последняя вставленная строка и в цикле выделить строку с

{{#each docs}} 
    <li class="{{isActive}}">{{name}}</li> 
{{/each}} 

и есть помощник, чтобы вернуться активным, если this._id равен реактивный вар с последним добавленным идентификатором.

Но это лучший способ сделать это? Как я могу удалить цвет через несколько секунд? Я видел такое поведение на многих страницах, но я не могу найти никаких учебников/фрагментов кода для этого.

Answer 1

я написал пакет, который использует UI hooks метеора исчезать элементы в и из списка, как они будут добавлены и удалены, чтобы помочь пользователям поддерживать контекст как изменения данных:

https://github.com/mizzao/meteor-animated-each

Существует демо-версия: http://animated-each.meteor.com/. Вы можете видеть, что по мере добавления и удаления элементов они исчезают и исчезают. Если элементы вставлены с экрана, видимая область не прокручивается.

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

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

Answer 2

Я не знаю, является ли ваш метод лучшим, но так я и делал. Что касается анимации, я бы использовал анимацию CSS3. Множество вариантов (https://developer.mozilla.org/en-US/docs/Web/CSS/animation), и вы можете легко заставить их исчезать до стандартного цвета. Анимация также будет применена только к последнему вставленному элементу (из-за того, как вы это сделали, только последний элемент будет иметь «активный» класс)