execute some function after rivets.js binding finishes

Question

I'm kinda new to rivets and I don't fully understand it so I came upon which seems to be a pretty basic thing to do, but I couldn't do it.

I'm trying to execute some jQuery that only runs AFTER rivets finished binding everything? (it is a $().each that enables click event on each line created after rivets binds a list to a rv-each li element)

It isn't working, but if I try to manually call the function after the pages finished loading and after rivets finished binding (on the browser console), then everything works great.

You got it worked but you want to understand the concept or do you still have some problem?? — Priya, Aug 06 '14 at 08:29
I got it to work by doing a nasty trick: I binded rivets to a input hidden a started a setInterval to check that input value every 100ms and after it has value, execute my script and clear the interval. It looks ugly, but works. — BrunoPugliese, Aug 06 '14 at 12:07
Nice trick to make it work.. But i'm curious to know why it is not working.. — Priya, Aug 06 '14 at 12:28
I'm probably doing something wrong. In fact, I'm not sure how to do it at all. How could I know that the binding "is over"? It seems to me that it is an assynchronous task. Even if I call something after the .bind() it executes before the values are where they should be. — BrunoPugliese, Aug 06 '14 at 16:20
Do you have any web service call to fetch the model or collection? — Priya, Aug 06 '14 at 20:04
I dont think there is anything built into rivets to do this - see https://github.com/mikeric/rivets/issues/337 — Symeon Breen, Aug 08 '14 at 18:08
@Symeon I guess I will stick with my "trick" using setInterval — BrunoPugliese, Aug 12 '14 at 13:31
I'm using rivets with backbone. This had never happened to me. So i'm just wondering how its working for me.. — Priya, Aug 13 '14 at 12:21

score 0 · Answer 1 · edited May 23 '17 at 12:13

You can wrap the code you want to execute after rivets binding is done inside a 0 timeout, so that it is pushed to the bottom of the callstack and will be executed after the existing tasks are completed.

var bigArr = [];
for (var i = 0; i < 20000; i++) {
  /* ADJUST THIS untill you see the difference
                                       WARNING: Keep it under control
                                    */
  bigArr.push({
    count: i
  });
}
rivets.bind($("div"), { // bind rivets
  arr: bigArr
});


setTimeout(function() {
  console.log("rivets done it's thing!"); // executed when binding is done
}, 0);

console.log("Rivets..? Who!"); // executed before elements are rendered

div {
  display: inline-block;
  margin: 5px;
  padding: 5px;
  background: royalblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/rivets/0.7.1/rivets.bundled.min.js"></script>
<div rv-each-item="arr">{item.count}</div>

execute some function after rivets.js binding finishes

1 Answers1