Missing elements on rendering template

[Matthew Scott]

Hello,

I'm using chain.js for client-side templating, and so far I like it.

I'm running into a problem with nodes getting stripped out of
templates though. See here for the paste: http://gist.github.com/44606
and here for rendering it: http://goldenspud.com/choppedoff.html

If you look at the template in #actions_template, you'll see a div at
the bottom that is in the template, but, at least under FF3 and WebKit
nightly, the div does not show up.

Note that it still doesn't show up even if I remove the ".children()"
line at line 23.

Perhaps this sequence of steps isn't the best way to go, and that
there is something more "correct" to achieve what I want?

$('#actions_template') // find the template
.clone() // keep the template intact
.items(data) // assign data to the copy
.chain() // chain it
.children() // grab its children
.appendTo(parent) // stick it to an element
;

I'll admit I'm still a journeyman when it comes to JavaScript, and my
time to evaluate jQuery and chain.js is running out pretty soon. If
anyone here can help me resolve this I'd be very grateful, and it
could perhaps mean that jQuery+chain.js wins for this app (Python
+Pylons backend, jQuery frontend, scientific plotting, lots of
reusable components, some potentially open sourced).

Thanks!

- Matt

[Rizqi Ahmad]

Hi matt,

isn't it because of the style="display:none;" ?
<div id="templates" style="display:none;">

[Matthew Scott]

Rizqi,

Thanks for the quick reply!

Actually, it's not. I think it's the return value of .chain(), and
that whether or not I got the .children() of that return value, it
wasn't a complete representation of the element I had called .chain()
upon. I can't seem to easily find out for sure what the return value
is supposed to be, based on the docs at http://wiki.github.com/raid-ox/chain.js/elementchain

To explain further:

The application I'm working on is very dynamic, so within one page
there's lots of widget creation and destruction during the course of
the app. I wanted to use a client-side templating engine so that I
could pass JSON back and forth between the page and the server, not
HTML snippets.

So, it seemed natural to have a series of templates for different
widgets or sections of widgets, then to make copies of them and then
use a templating engine (in this case, chain.js) to fill them in and
connect up various event handlers.

For what it's worth, I've updated http://gist.github.com/44606 and
http://goldenspud.com/choppedoff.html to reflect code that works as I
expected it to. I'm going to use a similar pattern in my app to see
how it works there.

Is this a reasonable use of chain.js? Do you have any "better
practices" for what it seems I'm trying to do? :)

[Rizqi Ahmad]

ah, now I understand your problem.

try use .chain({anchor:'ul.items'})

On Jan 8, 6:59 pm, Matthew Scott <gldns...@gmail.com> wrote:
> Rizqi,
>
> Thanks for the quick reply!
>
> Actually, it's not.  I think it's the return value of .chain(), and
> that whether or not I got the .children() of that return value, it
> wasn't a complete representation of the element I had called .chain()
> upon.  I can't seem to easily find out for sure what the return value

> is supposed to be, based on the docs athttp://wiki.github.com/raid-ox/chain.js/elementchain

>
> To explain further:
>
> The application I'm working on is very dynamic, so within one page
> there's lots of widget creation and destruction during the course of
> the app.  I wanted to use a client-side templating engine so that I
> could pass JSON back and forth between the page and the server, not
> HTML snippets.
>
> So, it seemed natural to have a series of templates for different
> widgets or sections of widgets, then to make copies of them and then
> use a templating engine (in this case, chain.js) to fill them in and
> connect up various event handlers.
>

> For what it's worth, I've updatedhttp://gist.github.com/44606andhttp://goldenspud.com/choppedoff.htmlto reflect code that works as I

[Matthew Scott]

That is what I needed!

I updated http://gist.github.com/44606 with the final solution.

I'll reply again once I've tried this in my app. I'm glad I had a few
other things to do, this is a much easier fix than the one I
discovered. :)

Thank you!

[Rizqi Ahmad]

hey matt, try this one:
http://friendpaste.com/5aqxFPCm8qBjWfIoCpE3xE

On Jan 8, 7:45 pm, Rizqi Ahmad <raid...@yahoo.de> wrote:
> ah, now I understand your problem.
>
> try use .chain({anchor:'ul.items'})
>
> On Jan 8, 6:59 pm, Matthew Scott <gldns...@gmail.com> wrote:
>
> > Rizqi,
>
> > Thanks for the quick reply!
>
> > Actually, it's not.  I think it's the return value of .chain(), and
> > that whether or not I got the .children() of that return value, it
> > wasn't a complete representation of the element I had called .chain()
> > upon.  I can't seem to easily find out for sure what the return value
> > is supposed to be, based on the docs athttp://wiki.github.com/raid-ox/chain.js/elementchain
>
> > To explain further:
>
> > The application I'm working on is very dynamic, so within one page
> > there's lots of widget creation and destruction during the course of
> > the app.  I wanted to use a client-side templating engine so that I
> > could pass JSON back and forth between the page and the server, not
> > HTML snippets.
>
> > So, it seemed natural to have a series of templates for different
> > widgets or sections of widgets, then to make copies of them and then
> > use a templating engine (in this case, chain.js) to fill them in and
> > connect up various event handlers.
>

> > For what it's worth, I've updatedhttp://gist.github.com/44606andhttp://goldenspud.com/choppedoff.htmltoreflect code that works as I

[Matthew Scott]

Worked equally as well, although for now I'm going to stick with the
last style I posted -- I ran across an area in my app where the latter
pattern was more useful, so for now I'm going to use that pattern
consistently.

[Rizqi Ahmad]

Ok, but I advice you to use my solution, since your version doesnt
make a aproper use of chain.js

If you chain an element, chain will manage that element, so it not
recommended to chain and move the children of the element

[Matthew Scott]

Understood. I'll take that into consideration and refactor code
accordingly.

I get the feeling that I'm only scratching the surface of what
chain.js can do. :)

I'll admit that this is as deep into jQuery as I've ever ventured, so
it's pretty fun to see what's out there these days.

If I get a chance to open up any of what I'm doing right now I'll post
about it here, so that perhaps I can get some insight as to how to
improve it.