simpleRenderer Component
charly molter
charly.molter at gmail.com
Fri Jun 17 10:06:17 UTC 2011
Hi there,
I've been working on a really quick component that Colin Clark suggested me:
"I notice that the code at lines 412-416 and 426-430 is pretty much
identical. The only difference is the class name injected into the
markup for the time display element. I'd suggest we factor that logic
out into a more usable form. When I was working on the Uploader's
Image Gallery demo, I created a small component called the
"simpleRenderer." It should do everything you need. Perhaps you'd like
to take that code and prepare it for inclusion in the framework? It
shouldn't be much work at all, and I'm happy to help you with the
process. Here's the code I'm referring to:
https://github.com/fluid-project/image-gallery/blob/master/js/image-gallery.js#L188-206
"
here are the original files: https://github.com/lahabana/videoPlayer.
So I've worked from his code to develop a little component that will
from an object create a whole html or XML hierarchy here is this
component: https://github.com/lahabana/videoPlayer/blob/b0fa67ca449fabe0b0d6f230164fd9d845706e46/js/simpleRenderer.js
the idea is to have a simple hierarchy like that:
<div class="myContainer">
</div>
var sr = fluid.simpleRenderer(".myContainer", {});
sr.render({
tag : "div",
attributes: {alt: "1",
id: "first"},
content: [{tag : "div",
classes: ["ab","bc","cd"],
attributes: {alt: "11"},
content: "This the first child"},
{tag : "div",
classes: "one",
attributes: {alt: "12"},
content: {tag : "span",
classes: ["two"],
attributes: {alt: "121"},
content: "Here is an example text"}
}]
});
and end up with that:
<div class="myContainer">
<div alt="1" id="first">
<div class=" ab bc cd" alt="11">This the first child </div>
<div class="one" alt="12">
<span class=" two" alt="121">Here is an example text </span>
</div>
</div>
</div>
As you'll see that renderer is really flexible and I tried to do it as
much flexible as I could.
However,
The fact that it is a component seems a bit of a waste... I explain
myself: there's a really limited number of options (currently one),
and the bigger use case will be the one I just shown and that could be
solved with a single function... Maybe adding more stuffs and
possibilities would make that component more of a component.
Also do you think I should make a separated field for the selector so
I could check if it already exists and things like that...
Please feel free to suggest thing or critic anything it's pretty much
the first component I make from scratch so I might have been clumsy on
some points.
Thanks
--
Charly Molter
More information about the fluid-work
mailing list