These are chat archives for ractivejs/ractive

22nd
Aug 2017
Joseph
@fskreuz
Aug 22 2017 00:35
Was just doing "computed props" (by using template function calls) in Angular. It's not even circular. Strange digest voodoo. :wink:
Luckily, Ractive's computed props don't appear to suffer the same fate. I just ported the app over to Ractive to escape the issue. :grin:
Chris Reeves
@evs-chris
Aug 22 2017 00:53
I have actually successfully used a circular computation in ractive that eventually settled (after a few cycles, which ractive warned about)
Joseph
@fskreuz
Aug 22 2017 00:53
:smile:
Chris Reeves
@evs-chris
Aug 22 2017 00:54
less indigestion
Joseph
@fskreuz
Aug 22 2017 13:35
Is Ractive treating template attributes as... attributes? props? or mapping between both?
Just realized why React does not like class in "elements".
Chris Reeves
@evs-chris
Aug 22 2017 14:21
they get stored in a map for easy access, but unless there's a component involved, they are neither directly attributes nor props
Joseph
@fskreuz
Aug 22 2017 15:05
When doing <input type="radio" name="{{ somedata }}"> on multiple instances of the same component, the selection jumps across instances. Any known way of preventing this?
(aside from wrapping the component markup in a dummy form)
Chris Reeves
@evs-chris
Aug 22 2017 15:11
I think as long as the binding is different, they will be separate
I haven't really messed with radio name bindings though
Joseph
@fskreuz
Aug 22 2017 17:49
I think it's natural HTML5 behavior that same-named radios not bound to a form are considered the same. It just makes components act... strange. :D
Chris Reeves
@evs-chris
Aug 22 2017 17:54
ah, gotcha! different components happen to have the same path
not sure how I missed that the first time
one of the requests for radio bindings has been a way to control the name attribute
Chris Reeves
@evs-chris
Aug 22 2017 18:30
We could allow two values in name bindings and let the name come from the second one
that would probably break something for someone though
Joseph
@fskreuz
Aug 22 2017 18:32
Wrapping the component (or the part with the radios) with a <form> works for me atm. It's probably good enough until there's some other use case that can't do it.
Chris Reeves
@evs-chris
Aug 22 2017 18:32
I've considered directive args as a parenthetical on the name e.g. <input type="radio" name('foo')="{{data}}" />, but that's terribly ugly and non-html-ish
Joseph
@fskreuz
Aug 22 2017 18:32
:scream_cat:
Chris Reeves
@evs-chris
Aug 22 2017 18:32
yeah
Joseph
@fskreuz
Aug 22 2017 18:32
You're on the path to cough Angular 2+ cough :D
Chris Reeves
@evs-chris
Aug 22 2017 18:32
no, no
that's not a path I shall tread
:grinning:
Joseph
@fskreuz
Aug 22 2017 18:34
<element [(ngSomething)]="something" #anotherSomething="omg"> :D
Chris Reeves
@evs-chris
Aug 22 2017 18:37
it might be less evil to require the bind directive e.g. <input ... bind-name(nameExpr)=data />, since that is at least obviously a binding of some sort
not terribly much though
one of the downsides to declarative things is sometimes you need extra config from the template and it can get... weird
tons more benefits than weirdnesses, though
Joseph
@fskreuz
Aug 22 2017 18:40
How about namespaces? i.e. <input type="radio" name="htmlnameleavemealone" r:bind="data"> Much more XMLy/SVGy. :D
Would be breaking tho. But syntax is familiar.
Would also be great for post-1.0/pre-2.0/future changes while keeping backwards compat to old syntax.
Chris Reeves
@evs-chris
Aug 22 2017 18:41
I suggested that in an issue a while back and got hard pushback :smile:
Joseph
@fskreuz
Aug 22 2017 18:42
(I might be one of those :scream: )
(looks for conversation)
Found it ractivejs/ractive#2790
Joseph
@fskreuz
Aug 22 2017 18:47
Still sounds like it might be a good 2.0 breaking change tho.
Chris Reeves
@evs-chris
Aug 22 2017 18:50
:grinning:
Curtis Taylor
@curtistee
Aug 22 2017 19:42
Hi everyone. Has the documentation for Components been updated to reflect changes from 0.8 to 0.9?
Joseph
@fskreuz
Aug 22 2017 19:42
Which aspect of components?
Everything that has got to do with APIs are on the APIs section https://ractive.js.org/api/ . Plugins, what they are, what they do and how to make one is on https://ractive.js.org/plugins/
Curtis Taylor
@curtistee
Aug 22 2017 19:45

I have one I’ve been using with ractive-load since 0.7.x. When registering it using Ractive.extend I keep getting the “multiple interitance” error, regardless of how I invoke it: Ractive.extend({…}).extend(component) or Ractive.extend(component, {…}).

What am I missing (note my avatar ;-)

Joseph
@fskreuz
Aug 22 2017 19:47
A form of multi-inheritance was removed in 0.9 https://ractive.js.org/support/#multiple-inheritance
Curtis Taylor
@curtistee
Aug 22 2017 19:47
Yes, I’ve seen that.
The workaround suggested doesn’t ;-)
Joseph
@fskreuz
Aug 22 2017 19:48
Hmm... Can you do a repro? https://ractive.js.org/playground/
Curtis Taylor
@curtistee
Aug 22 2017 19:48
I can try
Joseph
@fskreuz
Aug 22 2017 19:49
Also, there are issues with ractive-load in versions >= 0.8. Template version being one, attribute representation is another. We're working to get the plugins up to date. :)
Curtis Taylor
@curtistee
Aug 22 2017 19:50
I’ve hacked that for the template version, and replaced all the Ractive.Promise references with just “Promise.” If there’s more, well then...
Chris Reeves
@evs-chris
Aug 22 2017 21:49
I've updated the migration docs to hopefully be a little less misleading
Curtis Taylor
@curtistee
Aug 22 2017 21:51
Thanks, Chris. Much clearer ;-)
Curtis Taylor
@curtistee
Aug 22 2017 22:11
I’m thinking this is an issue with ractive-load; as Joseph said with attribute representation.
Joseph
@fskreuz
Aug 22 2017 22:15
One symptom is that dependencies using <link> will fail to load.
Related issue here: ractivejs/ractive-load#40
Curtis Taylor
@curtistee
Aug 22 2017 22:18
I see. I’m not using that methodology though:
Ractive.load(‘file.html")').then(function (Selector) { Ractive.components.selector = Selector.extend({…}}): });
in this case the template is rendering properly but events are not firing.
Joseph
@fskreuz
Aug 22 2017 22:19
Ahh. How are your events written?
There's a bunch of changes in event handling from 0.7 to 0.9. If you pass by 0.8, you'll probably get the deprecation warnings.
Curtis Taylor
@curtistee
Aug 22 2017 22:20
let’s see if I can get this to render properly...
<script type="text/javascript">
    component.exports = {
        data: function() {
            return {
                label: '',
                itemId: 0,
                updateLabel: function updateLabel(event) {
                    var tgt = event.original.target,
                        dataid = Number(tgt.getAttribute('data-id')),
                        text = tgt.innerHTML;
                    this.set('itemId', dataid);
                    this.set('label', text);
                },
                cleanDisplayName: function (displayName) {
                    if (displayName)
                        return displayName.toLowerCase().replace(/\s/g, '-');
                }
            }
        },
        onchange: function(event) {
            this.on('filter', function(event, id) {...});
        },
        onrender: function() {
            if (this.get('label').length === 0) {
                this.set('label', this.get('item0msg') ? this.get('item0msg') : this.get('items')[0].displayName);
                this.set('itemId', this.get('item0msg') ? 0 : this.get('items')[0].id);
            }
        }
    }
</script>
In the template:
<ul class="dropdown-menu lp-dropdown-menu" aria-labelledby="{{domId}}" on-tap="filter:{{domId}}">
                    {{#if item0msg}}<li data-id="0"><a href="#" data-id="0">{{item0msg}}</a></li>{{/if}}
                    {{#each items}}
                    <li data-id="{{id}}"><a href="#{{cleanDisplayName(displayName)}}" data-id="{{id}}">{{{displayName}}}</a></li>
                    {{/each}}
                </ul>
Curtis Taylor
@curtistee
Aug 22 2017 22:27
"The change event has been removed and replaced by recursive observers, which are strictly opt-in and can be scoped to a deeper keypath than the root."
Looks like I have some refactoring to do ;-)
Curtis Taylor
@curtistee
Aug 22 2017 23:07
So, from what I can tell adding listeners using ‘on’ in the oninit function doesn’t work for the component spec anymore.
Chris Reeves
@evs-chris
Aug 22 2017 23:09
that should still work the same way
Joseph
@fskreuz
Aug 22 2017 23:11
For onchange, I think recursive observers were the designated replacements.
Chris Reeves
@evs-chris
Aug 22 2017 23:12
you can rewrite that tap event to on-tap="['filter', domId]" which is sugar for on-tap="@this.fire('filter', domId)"
proxy events with args were removed in 0.9
Curtis Taylor
@curtistee
Aug 22 2017 23:13
It doesn’t seem to get picked up unless it’s defined in the data object.
Chris Reeves
@evs-chris
Aug 22 2017 23:15
subscribing an event from a change listener would result in a ton of subs for the filter event
Curtis Taylor
@curtistee
Aug 22 2017 23:15
indeed it would
using the square brackets syntax does the trick