Sketching out the successor to fluid.engage.renderUtils.createRendererFunction()

Colin Clark colinbdclark at gmail.com
Tue Jan 26 18:11:48 UTC 2010


Hi all,

Justin and chatted today about the big picture view for his very helpful createRendererFunction() utility in Engage. This picks up from a conversation that Michelle, Antranig, and I had during the framework sprint in Boulder back in November.

In short, createRendererFunction() is intended so significantly simplify the process of using the Renderer by automatically generating cutpoints from a list of DOM Binder selectors. A pattern of use has been emerging in many of the components that use it:

fluid.engage.myComponent = function (container, options) {
   var that = fluid.initView(...);

   that.render = fluid.engage.renderUtils.createRenderFunction(container, that.options.selectors, {
      selectorsToIgnore: ["foo", "bar"],
      repeatedSelectors: ["bazes"]
   });
};

It seems pretty clear that this is functionality we could offer free to users as part of Infusion's own initView(). Here are some sketches of what it might look like, to stimulate discussion. Antranig and Michelle, feel free to jump in if I'm missing any details from our "Egg And I" conversation. I'll use the Navigation List as an example.

1. Define a new special location in the options that house renderer-specific selectors. The standard "selectors" object would be used for selectors that aren't needed for rendering the initial view. We'll also need some kind of notation to identify repeating selectors.

selectors: {
    gridToggle: ".flc-navigationList-gridToggle",
    linkContainer: ".flc-navigationList-linkContainer"
},

rendererSelectors: {
    listItems: { // This is a fairly awkward notation for repeating selectors; suggestions for alternatives?
        selector: ".flc-navigationList-listItem",
        repeat: true
   },
   image: ".flc-navigationList-image",
   title: ".flc-navigationList-title",
   description: ".flc-navigationList-desc"
}  

2. We'd need to modify fluid.initView() to merge the "selectors" and "rendererSelectors" into a unified DOM Binder. There's one catch here--some selectors may not correctly match after rendering. For example, the description element in Navigation List won't be rendered if it's not present in the model. We'd need to implement some kind of selector-rewriting algorithm to make this work ideally.

3. If rendererSelectors is present, attach a render() function to the components (perhaps along with some way to customize the Renderer options as well).

Thoughts?

Colin


---
Colin Clark
Technical Lead, Fluid Project
http://fluidproject.org




More information about the fluid-work mailing list