These are chat archives for ractivejs/ractive

18th
Dec 2017
Paul Maly
@PaulMaly_twitter
Dec 18 2017 10:39
@all who isn't indifferent to Ractive: https://divar1.typeform.com/to/o0gha8
Julian Knight
@TotallyInformation
Dec 18 2017 11:56
@PaulMaly_twitter Done
Paul Maly
@PaulMaly_twitter
Dec 18 2017 11:57
@TotallyInformation Thanks
Julian Knight
@TotallyInformation
Dec 18 2017 11:57
Problem with docs? In the cssData section, Ractive.styleSet('foo', ...) is mentioned but I cannot find such a property on the Ractive object. Am I missing something or are the docs wrong?
Julian Knight
@TotallyInformation
Dec 18 2017 12:04
Doh! OK, So I found it as a static in the source now but when I set it using something like Ractive.styleSet('filterVals.gray', 90) where filterVals is a cssData variable on a component that is included in a new Ractive({...}), nothing changes in the browser - should it?
Sorry, still finding my way around. For reference, I'm building a component that outputs a toggle button that is safe for screen readers.
Joseph
@fskreuz
Dec 18 2017 14:48
The docs are still behind. 0.9 rolled out a bunch of cool features that need documenting. :sweat_smile:
If you spot any anomalies, inconsistencies, UFOs and the like, feel free to write up an issue or send a PR at https://github.com/ractivejs/ractivejs.github.io
Julian Knight
@TotallyInformation
Dec 18 2017 14:50
Hmm, doesn't make it very easy to learn does it! :( I've done a fork but I can't update anything yet as I don't know if there is or isn't an issue, at least on this point. I think I may have spotted a couple of other issues that I may be able to do PR's for.
Joseph
@fskreuz
Dec 18 2017 15:03
Hmm... anyways, if you also feel like it's a bug, feel free to send an issue our way https://github.com/ractivejs/ractive/issues/new :grin:
Julian Knight
@TotallyInformation
Dec 18 2017 15:55
Well here's another one :) Instance method resetTemplate is missing from the docs. Raising an issue now
Julian Knight
@TotallyInformation
Dec 18 2017 17:16
Found the styleSet issue, to reference a global component, you need to use `Ractive.components.MyComponentName.styleSet() - I'm going to suggest adding an extra example.
Julian Knight
@TotallyInformation
Dec 18 2017 17:33
Quick question: Is there a difference between {{>content}} and {{yield}} in a component template? I get that yield content doesn't have access to the components data but are there other reasons to use one over the other?
Paul Maly
@PaulMaly_twitter
Dec 18 2017 17:37
Simple: {{>content}} renders inner emplate in child component context. {{yield}} renders the same in parent component context.
yield very useful for wrapper-only components like modals etc
Julian Knight
@TotallyInformation
Dec 18 2017 17:40
Easy for you to say! :-) OK, thanks - I'm getting there slowly. I'm trying to wrap my head around the easiest way to dynamically add components to a page.
I want to be able to add a new component on receipt of a message from a websocket for example.
Paul Maly
@PaulMaly_twitter
Dec 18 2017 17:40
attachChild?
Check in docs: attachChild() & detachChild()
Joseph
@fskreuz
Dec 18 2017 17:41
{{> content }} vs {{ yield }}depends on your use case. I usually put it simply like:
  • If you want your component to be a "wrapper", go for {{ yield }}
  • If you want to abstract away the inner workings of the component, go for {{> content }}
For dynamic attachment of components, see anchors https://ractive.js.org/api/#anchors and what @PaulMaly_twitter suggested (https://ractive.js.org/api/#ractiveattachchild, https://ractive.js.org/api/#ractivedetachchild)
Paul Maly
@PaulMaly_twitter
Dec 18 2017 17:42
Yep
Julian Knight
@TotallyInformation
Dec 18 2017 17:42
Brill - another piece in the jigsaw - thanks guys - sorry for the newb. questions
Paul Maly
@PaulMaly_twitter
Dec 18 2017 17:43
Feel free to ask
Joseph
@fskreuz
Dec 18 2017 17:44
These (anchors, attachChild, detachChild) were also relatively new features, requested by other Ractive users. :thumbsup:
Julian Knight
@TotallyInformation
Dec 18 2017 17:44
Oh, while you are there, another one. I've created a button component - it has a default on-click function but I want people to be able to add their own function as well - can you see an obvious way to do that?
Joseph
@fskreuz
Dec 18 2017 17:45
Can you elaborate more what "add their own" means? Or... can we see how it's going to be used?
Paul Maly
@PaulMaly_twitter
Dec 18 2017 17:46
Function wrapper? Functiom which call other functions.
Julian Knight
@TotallyInformation
Dec 18 2017 17:46
I would like them to be able to run their own function as well as the the default function running
The default function is in the component
Chris Reeves
@evs-chris
Dec 18 2017 17:46
You can fire an instance event from the default handler
Paul Maly
@PaulMaly_twitter
Dec 18 2017 17:47
nice solution
Chris Reeves
@evs-chris
Dec 18 2017 17:47
then the user can listen from the component in the template <cmp on-whatever='...' />
Julian Knight
@TotallyInformation
Dec 18 2017 17:47
The reason is that my back end will deliver a message that triggers a component being added to the UI - once added, the instance needs to be able to trigger a message back to the server when the button is clicked
Chris Reeves
@evs-chris
Dec 18 2017 17:48
you can even name the event click if you want
instance events are also bubbled with their component babe as a
wow
Joseph
@fskreuz
Dec 18 2017 17:49
const MyButtonComponent = Ractive.extend({
  template: `
    <button on-click="@this.doSomethingFirst()">Click Me</button>
  `,
  doSomethingFirst(){
    // Do something default here

    // Then fire outwards
    this.fire('ihazclickedanddefaulted')
  }
})

const ractive = Ractive({
  components: { MyButtonComponent },
  template: `
    <MyButtonComponent on-ihazclickedanddefaulted="@this.doUserThingy()" />
  `,
  doUserThingy(){
    // Consumer defines their stuff here
  }
})
Chris Reeves
@evs-chris
Dec 18 2017 17:50
the android hitter client is killing me
Julian Knight
@TotallyInformation
Dec 18 2017 17:50
Ah, thanks Joseph - that makes sense. I think that will do it.
Chris Reeves
@evs-chris
Dec 18 2017 17:51
bubbled with the component name as a namespace, so you can listen in the root instance without needing to put a listener in the template
Julian Knight
@TotallyInformation
Dec 18 2017 17:54
OK, moving along nicely - I was stoked when I worked out that I could dynamically replace the template! What a thing to miss from the docs :-) This lets me have a single component that I can change between a standard button and a "switch" type 2-way button.
Joseph
@fskreuz
Dec 18 2017 17:57
Just in case you also wanted to dynamically link data to do two-way binding between an existing instance to your dynamically-created, to-be-attached instance, there's also https://ractive.js.org/api/#ractivelink
Is it just me, or are the imgshields images (the small green/orange/blue icons with numbers) on the homepage reeeally slow/take forever to load?
Martin Kolárik
@MartinKolarik
Dec 18 2017 18:01
yeah I'm always happy to see that jsDelivr is the fastest one to load :D
Joseph
@fskreuz
Dec 18 2017 18:04
Capture.PNG
:tada:
Chris Reeves
@evs-chris
Dec 18 2017 18:17
they're usually all loaded in < 2s, but right now, everything but jsDelivr is being awful
Julian Knight
@TotallyInformation
Dec 18 2017 19:47
Hmm, all broken for me - in fact, I hadn't even realised they were there since it is several seconds before even the alt-text appears
Failed to load resource: the server responded with a status of 522 ()
Chris Reeves
@evs-chris
Dec 18 2017 19:49
the badges... they are overloaded
looks like we're using img.shields.io and they're having issues at the moment
Julian Knight
@TotallyInformation
Dec 18 2017 19:51
Yup, looks like they could do with some optimisation on the requests - their caching strategy is non-existent.
Julian Knight
@TotallyInformation
Dec 18 2017 22:26
Thanks all, you've helped enormously. Here is an example of things so far. Templates switch via partials, parent function is run via an on targetted at the component onclick function (line 106). Issue #3166 has links to the example code in JSFiddle and the Playground.