content insertion

[queckezz]

Is it possible to insert content into composed components like this?

<app-sidebar>
  <li>home</li>
  <li>profile</li>
</app-sidebar>

app-sidebar:

<div>
  <ul>
    <!-- content from component goes here -->
    <content></content>
  </ul>
<div>

This is how it's done with native web components. Is there a ripple way? Couldn't find anything in the documentation.

[anthonyshort]

It's a little undocumented and tested yet, but you can call {{yield}} from within child components to do content insertion just like that.

<div>
  <ul>
    {{yield}}
  </ul>
<div>

It needs some work though since at the moment it just dumps the string in there

https://github.com/ripplejs/ripple/blob/master/lib/child-binding.js#L20

[wryk]

Why not use <content> instead of {{yield}} ? Like vue, old yielding is now deprecated (yyx990803/vue@1f3175b)

[anthonyshort]

It was really more of a concept thing. I haven't really tried testing it out yet so if <content> makes more sense we could just go with that. Only reason I'd be against it is that we don't really match the rest of the web component spec, so there's not much incentive in doing it here.

[queckezz]

Cool, thanks, didn't know that :) I actually like {{ yield }} more for the same reasons. I also think it doesn't makes sense to introduce a tag when you do everything else related with ripple through data binding. Cool thing would be if we could pick certain elements and insert it into a component:

lib/boot/template.html

 <app-header>
  <div id='logo'>
    <img src='logo.png' />
  </div>

  <div ref='menu'>
    <ul>
      ...
    </ul>
  </div>
</app-header>

lib/header/template.html

<div>
  {{ yield #logo }}
  <div class='u-wrap'>
    {{ yield [ref='menu']}}
  </div>
</div>

or something similar.

[anthonyshort]

That would be possible with filters, since it's just a value like anything else. 

{{ yield | select:"#foo" }}

I'm leaning towards just keeping it as yield for simplicity. A plugin could pretty easily be made that adds a content element that just renders the yield too. 

View.compose("content", Content)

Then just pass the yield value down to it. 

[queckezz]

Oh yeah, great idea. Will do that, thanks!