javascript - Highlight last inserted document in Meteor -


i have form , list of objects @ same page. when insert new row, not easy see newly inserted row placed. therefore, thought color/highlight newly inserted row (and perhaps remove highlight after few seconds).

how can this? think way using method on server returns inserted id (return collection.insert(doc);) , on client use callback with

meteor.call('insertdoc', function(err,result) {     // result }); 

i think can use reactive-var save id of last inserted row , in loop highlight row with

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

and have helper return active if this._id equals reactive var last inserted id.

but best way it? how can remove color after seconds? have seen such behaviour on many pages cannot find tutorials/code snippets achieve this.

i wrote package uses meteor's ui hooks fade items in , out of list added , removed, users maintain context data changes:

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

there demo @ http://animated-each.meteor.com/. can see items added , removed, faded in , out. if items inserted off screen, visible area not scroll.

this isn't doing want, can use same idea highlight items appear well, opposed simple fade in.

note of happens @ ui rendering level - not template/code level. ui hooks not documented right now, they've been around while.


Comments