These are chat archives for canjs/canjs

19th
Dec 2014
Luis Merino
@Rendez
Dec 19 2014 18:20
Hi all
I am relatively new to can.js 2 and I was reading over bitovi/canjs#1209 but I can't find out what would the best practice be to append components inside other components. For example, if I wanted to take the <tabs><panel>...</panel></tabs> example, how would I inject another component inside panel? Listening to the <panel> inserted event? With a callback within the template? How?
Gerard Finnerty
@halcyonandon
Dec 19 2014 19:54
Hi. You can do this a number of acceptable ways, there isn't one right way. For me, I simply include the tag for my child component inside the mustache template of the parent. In the js module, I just include the child component as a dependency (I use RequireJS)
Luis Merino
@Rendez
Dec 19 2014 19:55
Hi @halcyonandon thanks for the answer. That is good, as long as the child component is one tag.
Gerard Finnerty
@halcyonandon
Dec 19 2014 19:55
If you need to include it dynamically, template = can.stache(template); $('#content').html(template({"account": that.scope.account})); ...template being whatever tag name you use
Luis Merino
@Rendez
Dec 19 2014 19:56
So would this be admissible?
can.Component.extend
  tag: 'snapshot-manager'
[...]
events:
    'inserted': ->
      @element.scope().attr('visible', false)
      $('my-tag', @element).append JST['tabs_view']
As it is a child component I don't see tight coupling
Luis Merino
@Rendez
Dec 19 2014 20:02
This corresponds with subviews in any other classic framework
It's harder to unit test though
Gerard Finnerty
@halcyonandon
Dec 19 2014 20:09
I'm not sure, so you're appending JST[
JST['tab_view'] to the component element and the 'my-tag' component?
what is JST['tab_view']?
Gerard Finnerty
@halcyonandon
Dec 19 2014 20:16
also, #canjs on irc.freenode is a good chat, this one isnt so active
but anyways, components instantiate when they're inserted into the dom, so as long as your component's tag is appended to the dom, it will instantiate. I've found that when appending to the dom via javascript, I need to do this var template = can.stache('<some-tag/>'); ...just appending '<some-tag/>' won't work. It looks like you might be appending the entire javascript template, instead of just the tag
Luis Merino
@Rendez
Dec 19 2014 20:32
it's just a precompiled fn for the template
got it about IRC
Luis Merino
@Rendez
Dec 19 2014 20:42
@halcyonandon yeah, I assume that's because can.js isn't still using the native 'inserted' dom event due to browser compat, so the rendering function does it for us. That's just my guess.
Thanks, I think I feel more safe now about continuing