Ah, I just noticed that the link in my previous post didn't go to the most recent revision were all my code comments were, so here's a new one: http://jsfiddle.net/air_hadoken/6LpSs/4/
So with Mustache helpers your return type determines how you operate on the current part being rendered. You can pull these things out of the documentation, but here's a quick synopsis:
- Mustache.registerHelper("foo", function(compute, options) {
- return "bar"; // insert static text at this point.
- return Mustache.safeString("bar"); //insert this string as unescaped HTML, such that you don't have to use triple-braces.
- return options.contexts.attr("bar"); //insert live bound text from the context stack. Calling attr() here sets up a binding automatically
- return compute(); // insert live bound text based on a compute. Getting the compute value sets up a binding.
- return function(el) { $(el).text("foo"); }; //manipulate the current element after it's created, but not necessarily inserted into the DOM (could be in a document fragment;
- return Mustache.safeString("<div" + can.view.hook(function(el, parent, viewId) { $(el).text("bar"); }) + "></div>"); // insert markup with some elements live bound.
- });
In the fiddle we're using return function()... which means that we want an element to work from. In addition, we're storing the element's parent, because even if the element gets replaced by a new element on live binding -- and that element will not yet be a child of the parent, but of a document fragment -- the parent will still be in the DOM and report height changes correctly.
Doing height calculation, we need to wait until the element gets attached to the DOM. Thus:
- $el.bind("inserted", function() { ... });
which does exactly that.
can.view.live is a set of utilities that you can use in helpers. Using them, you can manipulate an element's content or attributes using observable data. Change events that fire up from data you reference will trigger the redrawing, and CanJS will automate the cleanup and replacement of old rendered HTML.
- can.view.live.html(el, can.compute(function() { ... }));
Here we mark the element that the Mustache engine passed to our helper callback as the live area, and then we create a new compute that resolves to the HTML (string) that we want to put there. Because we're setting up a compute that calls the compute that resolves to our original text, the two are bound together by CanJS magic. When the text content changes, the compute callback to can.view.live.html() changes, and that triggers the replacement of the HTML at the element.
The rest of the compute is just assembling spans into div chunks of 200px height or less, regular jQuery stuff that you're probably used to. Remember from earlier, it's using the parent that we grabbed because it's on the DOM. Finally the new HTML gets serialized and returned to the live binding engine for insertion.