underscoreJS: _.after and _.each; to control async flow

Question

I'm looking for _.after function just to play around with it.

var renderPoin = _.after(data.models.length, function() {
 console.log( 'siap' );
 require(["ftscroller"], function () {
   $('.dedo').css('width', $li_width);
    var containerElement, scroller;                                     
    containerElement = document.getElementById('poin-nav');                                             
    scroller = new FTScroller(containerElement, {
       scrollbars: false,
       scrollingY: false,
       snapping: true,
       scrollResponseBoundary: 8,
       scrollBoundary: 0
       //contentWidth: $li_width
    });
  });
});


_.each(data.models, function (poin, i) {
  db.transaction(function(trans) {
        trans.executeSql("insert into piezo_point(id, nama, lat, lng) values(?,?,?,?)", [poin.get('id'), poin.get('nama'), poin.get('lat'), poin.get('lng')]);                                      
  }, self.errorCB, function() {
      self.viewList = new Poin({
            model: poin,
            vent: window.vent
  });
  self.$el.find('#poin-nav ul').append(self.viewList.render().el);
  $li_width += parseInt(self.viewList.$el.css('width'));
  if ( (i+1) === data.models.length){                                                       
    renderPoin;
  }
 });    
}, self);

however the renderPoin above not executed as expected. What am I doing wrong?

thanks in advance

Answer 1

I think that it's just a typo.
You're not calling the renderPoin function because you're missing the () brackets in this part of the code:

if ( (i+1) === data.models.length){                                                       
    renderPoin;
}

update
I'm not even going to argue that your code is not even calling the desired function.
Take a look at the official docs:

(_.after)... Creates a version of the function that will only be run after first being called count times.

If you don't believe the docs either, try this running this simple test in your browser console:

var f = _.after(1, function(){});
alert(typeof f); // and be amazed

update #2
The whole purpose of the after function is to leave your callback triggering logic behind and just call the function on every loop. The _.after function decides when to actually call the function or not, so you might as well lose the if ( (i+1) === data.models.length){ and replace it with just the function call:

_.each(data.models, function (poin, i) {
    db.transaction(function(trans) {
        trans.executeSql("insert into piezo_point(id, nama, lat, lng) values(?,?,?,?)", [poin.get('id'), poin.get('nama'), poin.get('lat'), poin.get('lng')]);                                      
    }, self.errorCB, function() {
        self.viewList = new Poin({
            model: poin,
            vent: window.vent
        });
        self.$el.find('#poin-nav ul').append(self.viewList.render().el);
        $li_width += parseInt(self.viewList.$el.css('width'));     
        // just call it!                                            
        renderPoin();
    });    
}, self);