These are chat archives for ractivejs/ractive

14th
Jul 2017
Nevin Madukar k
@nevinm
Jul 14 2017 10:01

Hi, I have a query regarding the migration from 0.7 to 0.9.2:

{{#if degrees }}
<a class="degree-matcher__degree-link" on-click="selectDegree" href="#">
        {{ title }}
 </a>
{{/if degrees}}

JS:

this.view.on('selectDegree', event => {
      event.original.preventDefault()
      this.updateUrl(event.context.id)
    })
event.context is no longer present, so what's the best way to resolve this?
Nevin Madukar k
@nevinm
Jul 14 2017 10:44
event.get('id') is what I have to resolve for now.
Is that the best solution?
Nevin Madukar k
@nevinm
Jul 14 2017 11:54
Plus event.keypath is not present as well, where can I find it?
Joseph
@fskreuz
Jul 14 2017 12:04
@nevinm Hi! For 0.9, all events (regardless of source) will now receive a context object as first argument.
For components, it's an instance of Context. For DOM events, an event property is present referencing the original event.
Simply put, we just replaced the old event argument with a more standard object, popped in some handy methods, and got rid of event.original because it looked funny.
Nevin Madukar k
@nevinm
Jul 14 2017 12:10

@fskreuz
So This is on a different component.

 accordionTabClick (event) {
    event.original.preventDefault()
    const d = event.get()
    d.isHidden = !d.isHidden
    this.view.set(event.keypath, d) --> event.keypath is not present.
  }

Template:

 {{#envelope.unit.packet.payload.resultset.jobs.job}}
<div on-click="accordionTabClick">
   <h3>{{{title}}}</h3>
   <p>{{{location}}}{{locationSeparator}}{{{country}}}</p>
</div>
          {{/envelope.unit.packet.payload.resultset.jobs.job}}

So what I tried was using context.getBindingPath(reactInstance) to get the keypath, but that returned undefined.

Joseph
@fskreuz
Jul 14 2017 12:16
Hmm... so context would refer to <div> which has... no bindings.
Nevin Madukar k
@nevinm
Jul 14 2017 12:19
The bindings are done on top. I just extracted the code.
Just updated the code. @fskreuz
 {{#envelope.unit.packet.payload.resultset.jobs.job}}
 <div on-click="accordionTabClick">
    <h3>{{{title}}}</h3>
    <p>{{{location}}}{{locationSeparator}}{{{country}}}</p>
 </div>
{{/envelope.unit.packet.payload.resultset.jobs.job}}
Joseph
@fskreuz
Jul 14 2017 12:21
You could use a method call instead and pass in @keypath from the template.
Nevin Madukar k
@nevinm
Jul 14 2017 12:22
<div keypath='{{@keypath}}' on-click="accordionTabClick"> Something like this?
Joseph
@fskreuz
Jul 14 2017 12:22
Ractive({
    template: `
        {{# foo }}
            {{# bar }}
                <div on-click="@this.accordionTabClick(@keypath)">
                  <h3>{{{title}}}</h3>
                  <p>{{{location}}}{{locationSeparator}}{{{country}}}</p>
                </div>
            {{/}}
        {{/}}
    `,
    accordionTabClick: function(keypath){
        debugger;
    }
})
Nevin Madukar k
@nevinm
Jul 14 2017 12:23
ah, lemme try that.
Joseph
@fskreuz
Jul 14 2017 12:24
I'm not too familiar with what Context offers. It probably has a way to get keypaths somewhere.
Nevin Madukar k
@nevinm
Jul 14 2017 12:25
The proper way I saw was context.getBindingPath(). But that didn't work for some reason..
Joseph
@fskreuz
Jul 14 2017 12:27
getBinding and getBindingPath refer to data bindings. If <input value="{{ foo }}"> is the context, it gets the value of foo and the foo keypath respectively.
Nevin Madukar k
@nevinm
Jul 14 2017 12:32
Capture.PNG
Joseph
@fskreuz
Jul 14 2017 12:33
Behold the ginormous playground link. See example.
notably, line 16.
More on that in the proxy syntax and expression syntax subsection of event management https://ractive.js.org/concepts/#proxy-syntax
Nevin Madukar k
@nevinm
Jul 14 2017 12:42
Yes @fskreuz I did get the keypath through that method. However, it looks a bit dirty. So has the keypath been removed from the context object?
And is this the only way to replace that code for migration purposes?
What I was aiming for is to get it through the on method
Joseph
@fskreuz
Jul 14 2017 12:43
There's probably a better way, this is just the one I'm aware of. @evs-chris knows more about the Context object. His input will yield better results. :D
Nevin Madukar k
@nevinm
Jul 14 2017 12:44
Yup, will wait for his answer as well :D
Joseph
@fskreuz
Jul 14 2017 12:45
Alternatively, if you really want to get it through on, you can use the expression-style proxy event and pass @keypath as argument.
Nevin Madukar k
@nevinm
Jul 14 2017 12:45
Joseph
@fskreuz
Jul 14 2017 12:47
Yup. That's a bit dated tho. 2015... :grin:
Try this one. The :-style args was replaced by this.
Nevin Madukar k
@nevinm
Jul 14 2017 12:53
Yup, that's much cleaner and worked :D Using this for now. Thanks Joseph!
Will wait on @evs-chris if there's any other better solution. Cause removing keypath seemed a bit weird.
Chris Reeves
@evs-chris
Jul 14 2017 13:05
resolve will probably be what you're looking for. It's kinda like node's path.resolve in that it will take a relative keypath and return an absolute one where possible. No args give you the context immediate keypath.
Joseph
@fskreuz
Jul 14 2017 13:06
:tada:
Nevin Madukar k
@nevinm
Jul 14 2017 13:07
Yup, nailed it!
:+1:
Chris Reeves
@evs-chris
Jul 14 2017 13:10
The goal with contexts was to have something with the same api as ractive to be able to pass around to avoid having an actual ractive instance and having to do a bunch of keypath string manipulation with it. Plus, the context sticks with the element, so if there's a splice that moves stuff around, the context is still accurate.