These are chat archives for ractivejs/ractive

15th
Aug 2018
Tom Randolph
@rockerest_gitlab
Aug 15 2018 01:54
Hi guys, I've been bashing my head against the wall on something that seems utterly trivial and I was wondering if I could get some fresh eyes.
I have this HTML:
<table>
    <thead>
        <tr>
            <th>Category</th>
            <th>% Value</th>
        </tr>
    </thead>
    <tbody>
    {{ #tableData }}
        <tr>
            <td><input value="{{ this.name }}" /></td>
            <td><input value="{{ this.value }}" /></td>
        </tr>
    {{ / }}
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">
                <button on-click="addRow">Add a row</button>
            </td>
        </tr>
    </tfoot>
</table>

That is pre-compiled to this template:

{"v":4,"t":[{"t":7,"e":"table","f":[{"t":7,"e":"thead","f":[{"t":7,"e":"tr","f":[{"t":7,"e":"th","f":["Category"]}," ",{"t":7,"e":"th","f":["% Value"]}]}]}," ",{"t":7,"e":"tbody","f":[{"t":4,"f":[{"t":7,"e":"tr","f":[{"t":7,"e":"td","f":[{"t":7,"e":"input","m":[{"n":"value","f":[{"t":2,"r":"./name"}],"t":13}]}]}," ",{"t":7,"e":"td","f":[{"t":7,"e":"input","m":[{"n":"value","f":[{"t":2,"r":"./value"}],"t":13}]}]}]}],"r":"tableData"}]}," ",{"t":7,"e":"tfoot","f":[{"t":7,"e":"tr","f":[{"t":7,"e":"td","m":[{"n":"colspan","f":"2","t":13,"g":1}],"f":[{"t":7,"e":"button","m":[{"n":["click"],"t":70,"f":"addRow"}],"f":["Add a row"]}]}]}]}]}]}

Sorry, the beautified version is too big to paste in.

Note, however, this chunk, which should attach a click handler to the button:
                                         {
                                            "t": 7,
                                            "e": "button",
                                            "m": [
                                                {
                                                    "n": [
                                                        "click"
                                                    ],
                                                    "t": 70,
                                                    "f": "addRow"
                                                }
                                            ],
                                            "f": [
                                                "Add a row"
                                            ]
                                        }
Chris Reeves
@evs-chris
Aug 15 2018 01:58
event delegation 😁
you can disable it on the instance or globally
Tom Randolph
@rockerest_gitlab
Aug 15 2018 01:59
I assume you've perceived that the DOM is not getting an event handler bound at all.
But I've never had this problem before, and I've never turned off event delegation (I don't even know how)
Chris Reeves
@evs-chris
Aug 15 2018 01:59
shouldn't cause any issues either way, but with it enabled, you get a little performance boost for large iterative chunks with lots of events
there should be a click on the tbody in your case
if there's not, it's a bug
is the click not firing?
did you recently update to 0.9?
Tom Randolph
@rockerest_gitlab
Aug 15 2018 02:01

Haha, I think it's a bug.

Here's the DOM as rendered

image.png
I included a button above to show that I should be able to see when events are bound

did you recently update to 0.9?

Negative, been on 0.10 for quite some time

Chris Reeves
@evs-chris
Aug 15 2018 02:02
wait... I misread your template
the button is outside the each
hmmmm
Tom Randolph
@rockerest_gitlab
Aug 15 2018 02:02
Correct. I actually can't move this anywhere and get it to attach the click, despite other components working perfectly fine.

I've reduced this component to just:

Ractive.extend( {
    "template": [the JSON above]
} );

and it's still happening

To be clear, I can get this to work in isolation (given the above template), but I have no idea why it wouldn't be working in the context of this app - which is very simple and isn't doing anything complicated: https://codepen.io/rockerest/pen/djEopN
Chris Reeves
@evs-chris
Aug 15 2018 02:07
can you get it to break in the playground?
Tom Randolph
@rockerest_gitlab
Aug 15 2018 02:08
Let me try, I might have to come back tomorrow...
Boy, it's so nice to see this working as intended... :joy:
Chris Reeves
@evs-chris
Aug 15 2018 02:10
there reason the pen isn't working is that there is no subscribed event listener
Tom Randolph
@rockerest_gitlab
Aug 15 2018 02:11
No no, I consider the pen "working" since the button has a bound event (as expected)!
Chris Reeves
@evs-chris
Aug 15 2018 02:12
ah
sorry, I'm on mobile right now, so I'm a bit slow 😀
Tom Randolph
@rockerest_gitlab
Aug 15 2018 02:13
not a problem at all, I appreciate you helping out.
Tom Randolph
@rockerest_gitlab
Aug 15 2018 02:18

Gonna have to come back to this later. Can't break it the only way I thought it could be (not rendered at first). Thanks for the quick response.

updated playground

Joseph
@fskreuz
Aug 15 2018 12:20
I'm a bit confused. Can you state what is expected and what's actually happening?
Tom Randolph
@rockerest_gitlab
Aug 15 2018 15:55

Given this HTML:

<button on-click="addRow">Add a row</button>

That results in this template:

{
  "t": 7,
  "e": "button",
  "m": [
    {
        "n": [
            "click"
        ],
        "t": 70,
        "f": "addRow"
    }
  ],
  "f": [
        "Add a row"
    ]
}

I would expect a <button>Add a row</button> with a click event bound to it.

What results is that I get a <button>Add a row</button> with no events bound at all.

I can't replicate this in the playground or an isolated Codepen, which implies it's caused by something else in the rendering stack, but I have no idea where to start looking as this seems highly unusual.

Joseph
@fskreuz
Aug 15 2018 17:37
Weird. Hmm... is it possible that what is being rendered is not the component you expect?
I've had my share of those :grin: Staring at a completely different component on the IDE from the one I'm debugging on the browser.
There might also be some DOM sorcery (jQuery and friends) somewhere that's moving things around.
But if it is Ractive, I'd look into the code that attaches those events to the elements, see its execution in isolation, and compare it with one that's broken.
Chris Reeves
@evs-chris
Aug 15 2018 18:19
if you have something you can share publicly or privately/temporarily (cloud9 or a dev server or something) I can take a look at it for you
Tom Randolph
@rockerest_gitlab
Aug 15 2018 18:26
Actually yes, let me drop this in a repo + netlify. I've narrowed it down to one function on an unrelated component, but I'm stumped again
Tom Randolph
@rockerest_gitlab
Aug 15 2018 18:39

https://gitlab.com/rockerest/charts

https://inspiring-spence-34cbae.netlify.com/

npm install && npm run build && npm start to see it locally on localhost:9876

Comment out lines 117-147 in js/views/current.js + npm run build to get the button binding to work

Note that the component in question (not binding a click to the button) is js/components/editor.js and the only link between the two that I can see is these lines where they're rendered near each other, but unrelated to each other.
Chris Reeves
@evs-chris
Aug 15 2018 18:58
it looks like what's happening is renderChart is throwing an exception which is breaking the render cycle in ractive such that it never completes its initial runloop
if you guard against an empty string here it should move on
Tom Randolph
@rockerest_gitlab
Aug 15 2018 19:01
I had a suspicion of something like that, but I have two questions:
  • How is renderChart ever being called? It's within a check for a boolean value, so renderChart and the editor should never be running at the same time, right?
  • Why isn't this exception being bubbled anywhere? I've turned DEBUG back on and get no output?
Chris Reeves
@evs-chris
Aug 15 2018 19:02
you should see the exception logged in the console
they're not running at the same time
the exception gets ractives internal runloop out of whack such that it has a loop that never closes
that loop continues to batch tasks ad infinitum, thus swallowing a number of actions, but not enough to break then entire world
I feel like ractive should probably wrap event handlers in a try-catch to avoid weird breakages like this
Tom Randolph
@rockerest_gitlab
Aug 15 2018 19:05

but not enough to break then entire world

Okay, this is why I was confused, cause things like the tab behavior were still working

Chris Reeves
@evs-chris
Aug 15 2018 19:05
for non-lifecycle events (dom events, etc) it doesn't really matter because they happen outside of the event loop
Tom Randolph
@rockerest_gitlab
Aug 15 2018 19:05
And sadly, I do not get any console output, which is exceptionally weird.
Chris Reeves
@evs-chris
Aug 15 2018 19:06
huh
chrome?
Tom Randolph
@rockerest_gitlab
Aug 15 2018 19:06
Nope, Firefox. Just tried it in Chrome and got the error, which - obviously - immediately pointed me to the right spot
face palm so much wasted time
Chris Reeves
@evs-chris
Aug 15 2018 19:07
computers are fun :D
Tom Randolph
@rockerest_gitlab
Aug 15 2018 19:07
I don't have any console output filtering on in Firefox :-/
Chris Reeves
@evs-chris
Aug 15 2018 19:08
at this point, I still default to chrome for dev stuff because the devtools are stupid good
which is a shame, because I like firefox more in a number of ways, including on principle
if you turn on 'pause on exceptions', firefox will show you
it's a shame it doesn't default to dumping uncaught exceptions to the console though
the same little blue pause button in chrome's devtools is my goto for 'weird crap is happening and I can't figure out where'
Tom Randolph
@rockerest_gitlab
Aug 15 2018 19:15

if you turn on 'pause on exceptions', firefox will show you

EXCELLENT tip, thank you.

Strangely, I've never had this problem before. Exceptions have always bubbled to the console directly for me, until now :-/

(including from within Ractive, in the past!)
Cerem Cem ASLAN
@ceremcem
Aug 15 2018 21:34
a nice debug session