These are chat archives for ractivejs/ractive

2nd
Mar 2018
Juan C. Andreu
@andreujuanc
Mar 02 2018 00:42
yeap, brackets are just there to differentiate the event fire's syntax sugar from multiple expressions. That's why they are there. if you consensus dont like that syntax, then the multiple expression chain syntax must change, and that'd make things COMPLICATED D::
Joseph
@fskreuz
Mar 02 2018 02:37
I personally don't use it. But just because I don't like it doesn't mean it's bad or just because it's there doesn't mean you have to use it. I just pretend it doesn't exist. :grin:
Removing it because something else is already there is like saying {{& }} cannot exist because there's{{{ }}} or {{# array }} cannot exist because there's{{#each array}}, and so on and so forth...
Joseph
@fskreuz
Mar 02 2018 02:49
If you look at the API just a wee bit closer, a lot of Ractive's features are redundant/overlapping/can be written in a handful of ways. It's a feature. :wink:
kouts
@kouts
Mar 02 2018 06:33
Seems I'm a bit late on this :smile: , 95% percent of the time I use events defined inside on: { ... } for actions triggered inside my templates. I use the array syntax and in order to keep it consistent across
project I even use the array syntax when there's only one argument (ie the event name) e.g on-click="['close']"
kouts
@kouts
Mar 02 2018 06:39
I use methods defined on instance level when I want to return some value from the method e.g a Promise
or a new Array with let's say filtered results
Chris Reeves
@evs-chris
Mar 02 2018 06:46
yep, array-style events and the on hash are like chocolate and peanut butter
I'm not disciplined enough to use brackets on a plain event though :smile:
kouts
@kouts
Mar 02 2018 07:32
@evs-chris, maybe it's a silly question, but why methods defined inside on: { ... } cannot return a value (e.g an Object an Array etc)? Seems they just return true.
Chris Reeves
@evs-chris
Mar 02 2018 07:35
not sure I follow... methods in the on hash are passed in to this.on() just before construct, so their only meaningful return would be a boolean to stop bubbling, no?
kouts
@kouts
Mar 02 2018 09:21
@evs-chris can you give a simple example for this?
kouts
@kouts
Mar 02 2018 10:01
or maybe there is an example already available in the docs @fskreuz ?
Cerem Cem ASLAN
@ceremcem
Mar 02 2018 10:03
@kouts just curious, what kind of return value do you need?
Cerem Cem ASLAN
@ceremcem
Mar 02 2018 10:26
one example I might think of is that you may have a button that will copy a sorted form of an array to another variable and you want to handle all of this inside the template:
{{#each myArr}}...{{/each}}
<button on-click="otherArr = copyAndSortArray(myArr)">sort me</button>
{{#each otherArr}}...{{/each}}
Cerem Cem ASLAN
@ceremcem
Mar 02 2018 12:57
I've never defined a method. What is the use case of methods? What can they do while helper functions (data functions) can't?
Joseph
@fskreuz
Mar 02 2018 13:16
@ceremcem clear separation between data and logic. I usually dump plain objects en masse into a tree of components from a store/api. Another use case is if your workflow is very object-y. Similar to how you can have "models" (data with methods), you can also have component instances... with methods.
const Component = Ractive.extend({
    foo(){
        console.log('test')
    }
})

const instance = new Component()

instance.foo()
It really depends on how you write your code. This makes sense written this way (very OOP, object-building), but doesn't make sense with components where you should not care about component internals and just listen to events.
const Component = Ractive.extend({
  foo(){}
})

const instance = Ractive({
  components: { Component },
  template: `<Foo />`
})

// I should not care about Foo internals. I can only feed it data and listen to events.
Cerem Cem ASLAN
@ceremcem
Mar 02 2018 13:23
My workflow is like the second one, so I may simply ignore methods?
Joseph
@fskreuz
Mar 02 2018 13:28
Depends on your taste really. :grin:
kouts
@kouts
Mar 02 2018 13:45
@fskreuz so is that different from context.original.preventDefault(); ?
Chris Reeves
@evs-chris
Mar 02 2018 13:46
that's what gets called when an event listener returns false
along with cancel bubble
and the equivalent if the event is a ractive event triggered by fire
kouts
@kouts
Mar 02 2018 15:12
Quick question: Is there any way to define proxy events globally? For plain methods I use Ractive.prototype.mymethod (If there is a better way for this please share) is there any equivalent for proxy events?
e.g Ractive.prototype.addproxy('name', function) or something?
Chris Reeves
@evs-chris
Mar 02 2018 15:15
technically, proxy events aren't registered - only the listeners are, and they have to have an instance to manage them
are you wanting to install a listener on every instance or catch all events at a root instance?
kouts
@kouts
Mar 02 2018 15:18
No I just want to have this method available globally, so the correct way is to add this method as a global method on the Ractive prototype right?
Chris Reeves
@evs-chris
Mar 02 2018 15:22
if you mean for use in an event handler, then yes, the prototype is the place to put mymethod if you want to on-click="@.mymethod()"
globally
Arnaud Dagnelies
@dagnelies
Mar 02 2018 18:16
hey @fskreuz , how exactly do you edit (github) the tutorial demos in the docs?
Do you each time make the demo in the playground and copy the hash tag?
inside the doc's button?
Chris Reeves
@evs-chris
Mar 02 2018 18:17
yes
Cerem Cem ASLAN
@ceremcem
Mar 02 2018 18:17
@dagnelies yes, AFAIK (I do so at least)
Chris Reeves
@evs-chris
Mar 02 2018 18:18
it's a little cumbersome, but it works
Arnaud Dagnelies
@dagnelies
Mar 02 2018 18:18
wow, it must really have been a tedious job to port them from the old site
Chris Reeves
@evs-chris
Mar 02 2018 18:19
a little
Arnaud Dagnelies
@dagnelies
Mar 02 2018 18:19
but once it's done, it's over
thx for the info
kouts
@kouts
Mar 02 2018 18:21
thanks @evs-chris
Joseph
@fskreuz
Mar 02 2018 18:37
Whatever @evs-chris said :point_up: :grin:
And we have not yet reached the goal of "runnable examples for all the things". :grin:
Chris Reeves
@evs-chris
Mar 02 2018 18:42
👍
Cerem Cem ASLAN
@ceremcem
Mar 02 2018 18:42
@fskreuz I have some ideas about this one, which still is waiting to be able to build Playground: ractivejs/ractivejs.github.io#105
Chris Reeves
@evs-chris
Mar 02 2018 18:45
on my list of things to do is getting the playground a proper build
Cerem Cem ASLAN
@ceremcem
Mar 02 2018 18:52
I had no time to look deeply, but @dagnelies uses some kind of playground in his examples. I do like it. It might be adapted somehow?
Joseph
@fskreuz
Mar 02 2018 20:27
It's ace editor. Playground also uses ace, iirc.
Chris Reeves
@evs-chris
Mar 02 2018 21:13
yep. I tend to prefer ace over code mirror for reasons that I can't recall