These are chat archives for ractivejs/ractive

11th
Jul 2017
Joseph
@fskreuz
Jul 11 2017 04:38
A scenario where resolveInstanceMembers becomes confusing https://stackoverflow.com/q/45022326/575527 and what it sort of breaks ractivejs/ractive#3040
Chris Reeves
@evs-chris
Jul 11 2017 05:43
Ambiguity is not your friend 😉
I think the option should probably stay, mostly for legacy reasons, but it will definitely get defaulted to false for 1.0
Maybe even before then, as it's been involved in about 10% of the issues involving 0.9
paulie4
@paulie4
Jul 11 2017 20:00
@evs-chris, you had a ractive.js.org/playground example a while back that I think used decorators to update some text to indicate what anchor was visible. I searched through Gitter a bit but couldn't find it.
Chris Reeves
@evs-chris
Jul 11 2017 20:23
I really need to package up all my playground experiments into a lib
Joseph
@fskreuz
Jul 11 2017 20:23
:D
You could put them in a gist
Chris Reeves
@evs-chris
Jul 11 2017 20:25
some are
paulie4
@paulie4
Jul 11 2017 20:25
gists would work for me
Chris Reeves
@evs-chris
Jul 11 2017 20:25
it won't fit in a gitter message :laughing:
Joseph
@fskreuz
Jul 11 2017 20:26

behold the enormous link

:D

Chris Reeves
@evs-chris
Jul 11 2017 20:28
it's weird... I've been keeping the experiments that turn out well as drafts in gmail
Chris Reeves
@evs-chris
Jul 11 2017 21:21
has anyone given any thought to dynamic component css?
Matt Granmoe
@granmoe
Jul 11 2017 21:22
Is there a way to access the parent's data within the template of a child that was yielded from that parent?
Chris Reeves
@evs-chris
Jul 11 2017 21:23
you mean with an instance that has a component that it passed content to - access something from the component within the content?
Matt Granmoe
@granmoe
Jul 11 2017 21:23
<foo>
  <bar />
</foo>
meanwhile in bar's template...
Some property on the parent's data: {{baz}}
and in foo's template:
{{yield}}
Joseph
@fskreuz
Jul 11 2017 21:25
This one is a topic that comes up often but I always forget the answer. I usually say "pass it in as attributes to <bar>" and @evs-chris would then have a programmatic answer. :D
Matt Granmoe
@granmoe
Jul 11 2017 21:25
not explicitly passing anything in this case because I'd like to be able to wrap anything in foo, I just don't want to have to explicitly pass foo's data to everything it ever wraps
I guess I left out some context...here's what I'm getting at:
<tabs tabNames="{{listOfTabNames" activeTab="foo">
  <tab-panel tabName="foo">
      any content anyone wants to show in a tab
  </tab-panel>
  <tab-panel tabName="bar">
     asdfasdfasdf
  </tab-panel>
</tabs>
^ that's how it would be used
Chris Reeves
@evs-chris
Jul 11 2017 21:29
if you yield, then everything in the content of foo is already in parent context, so that's where mappings land: ginormous playground link
for tabs, there's a better way using a small amount of preprocessing in the config lifecycle event
Matt Granmoe
@granmoe
Jul 11 2017 21:30
then tabs is simply:
<div>
    {{#tabNames}}
           iterate these and show tabs with one of them being active based on "activeTab"
    {{/tabNames}}
</div>

<div class="panel">
    {{yield}}
</div>
Chris Reeves
@evs-chris
Jul 11 2017 21:30
actually most container-y components benefit from it
I have some examples in the playground rework I'm working on here and there
I shall gist you the tab component code
Matt Granmoe
@granmoe
Jul 11 2017 21:32
awesome, thanks :)
...was not expecting embedded gist
Matt Granmoe
@granmoe
Jul 11 2017 21:35
Me neither, but I just see a big white square...I think my corporate proxy is blocking it
Chris Reeves
@evs-chris
Jul 11 2017 21:35
anyways, if you run that through the ractive component cli or use the ractive-bin-loader in webpack, you can see how it works
Matt Granmoe
@granmoe
Jul 11 2017 21:36
great idea to block developers from github :worried:
Chris Reeves
@evs-chris
Jul 11 2017 21:36
awesome...
can you get to pastebin or some other similar service?
Matt Granmoe
@granmoe
Jul 11 2017 21:37
oh, yep that worked :D
{{yield extra-attributes}} What does this mean?
:-D
Matt Granmoe
@granmoe
Jul 11 2017 21:39
I'm new to ractive :-)
Chris Reeves
@evs-chris
Jul 11 2017 21:39
in the config event, you'll see that I'm processing what I want out of the passed in content partial
in this case, it's elements that are named tab
you use it thusly:
<tabs transition="fade">
  <tab title="{{someRef}}">Content of the first tab</tab>
  <tab title="just a string" closable on-close=".closable">Second tab that is closable if .closable is true in the container context</tab>
</tabs>
I haven't gotten round to programmatic tab management yet
does anyone else feel dirty using display: table?
Chris Reeves
@evs-chris
Jul 11 2017 21:45
would have preferred flex, but I need IE10 for some projects :(
Matt Granmoe
@granmoe
Jul 11 2017 21:46
can't we just add an option to pass something directly with yield? ;-)
{{yield params="{{ thing: 'value' }}" }}
Chris Reeves
@evs-chris
Jul 11 2017 21:47
what would that do?
Matt Granmoe
@granmoe
Jul 11 2017 21:47
so in my case, I could pass anything that is accessible within the current context, but then back in the component that is rendering me, have access to its context like normal as well
Chris Reeves
@evs-chris
Jul 11 2017 21:48
you can pass aliases into a yield {{yield whatever with { thing: 'value' } as params}}
Matt Granmoe
@granmoe
Jul 11 2017 21:48
what the
oh
could not find that in the docs
Chris Reeves
@evs-chris
Jul 11 2017 21:48
then in the whatever partial, params is { thing: 'value' }
Matt Granmoe
@granmoe
Jul 11 2017 21:49
does it have to be a partial? I want to use a generic yield so I don't have to be limited to a certain partial
Chris Reeves
@evs-chris
Jul 11 2017 21:49
I think we may have missed that particular feature in the docs
it can be the content partial e.g. {{yield content with ...}} or {{yield with ...}}
Matt Granmoe
@granmoe
Jul 11 2017 21:51
so
{{yield with { foo: bar } as params}}
is the "as" needed?
Chris Reeves
@evs-chris
Jul 11 2017 21:51
currently, yes
there has been a suggestion to make it optional
Matt Granmoe
@granmoe
Jul 11 2017 21:52
hmmm not compiling on 0.8.12:
(ractive plugin) expected legal partial name at line 13 character 15:
{{yield with { activeTab: 'test' } as params}}
Chris Reeves
@evs-chris
Jul 11 2017 21:52
no, that was added in 0.9
Matt Granmoe
@granmoe
Jul 11 2017 21:52
ah
bumping the version of ractive just to pass a variable...that seems legit
(on my side, I mean)
Chris Reeves
@evs-chris
Jul 11 2017 21:54
nearly bleeding edge
at the very least, there's probably some bruising
Chris Reeves
@evs-chris
Jul 11 2017 22:14
yielding with aliases is now documented
back around to updating/customizing component css - anybody?
having fixed css for components is fine if you're not trying to make a reusable library
being able to attach classes via extra-attributes makes it slightly less painful to customize specific instances
but it doesn't help with e.g. style guide compliance