meteor - Accessing data from outside events callback -

<template name="sidenav">   <ul class='block-items white'>     {{#each blocks}}       <li class='block-item'>         <i class="fa fa-fw fa-folder"></i>         <i class="fa fa-fw fa-folder-open"></i>         <a href='#' class='block-item-link'>           {{name}}      ...      {{/each blocks}} </template> 

given this, can access each block-item's id when it's clicked doing

template.sidenav.events({   "click .block-item": function (e, tem) {     //var blockitemid = this._id;   } }); 

how can borrow same feature other places, onrendered()? take @ following example:

  template.sidenav.onrendered(function() {     this.$('.block-items').sortable({       update: function (e, ui) {         _.each($('.block-item'), function (blockitem) {           // how blockid?         })         console.log("block item rearranged");       }     }); 

update callback function that's invoked when there change in order of block items in ul list. need way iterate through block items , corresponding mongo id's. how can it?

related documents:

1. the context of "this" in meteor template event handlers (using handlebars templating)

update: "meteor way"

if looking how blaze gets data context events , helpers, turns out there magical blaze.getdata() function takes blaze view or dom object , returns data context. far tell looking @ code, seems tool blaze uses providing data contexts helpers , events.

so in case, use:

  template.sidenav.onrendered(function() {     this.$('.block-items').sortable({       update: function (e, ui) {         _.each($('.block-item'), function (blockitem) {           var context = blaze.getdata(blockitem.get(0));           var blockid = context._id;         })         console.log("block item rearranged");       }     }); 

---

original answer

an easy way id of document when working dom manipulation (other blaze events) explicitly set attribute in template, such as:

<template name="sidenav">   <ul class='block-items white'>     {{#each blocks}}       <li class='block-item' id='{{_id}}'>         <i class="fa fa-fw fa-folder"></i>         <i class="fa fa-fw fa-folder-open"></i>         <a href='#' class='block-item-link'>           {{name}}      ...      {{/each blocks}} </template> 

this way, can fetch id using jquery's attr method:

  template.sidenav.onrendered(function() {     this.$('.block-items').sortable({       update: function (e, ui) {         _.each($('.block-item'), function (blockitem) {           var blockid = blockitem.attr('id');         })         console.log("block item rearranged");       }     });