State out of date when switching routes

Expected behavior

When attaching a callback to state.events.NAVIGATE, and navigating to a new route, I expect state.route to represent the current route.

Actual behavior

Instead, state.route is out of date. It should displaying the current route, but instead shows the previous. For example, if navigating from a route called /cute to one called /nice, it will return /cute.

function model (state, emitter) {
  emitter.on(state.events.NAVIGATE, function () {
     console.log(state.route)
  })
}

[yoshuawuyts]

Should be fixed in choo@6.7.0 🎉

[jongacnik]

Update: Turns out the below code is unreliable, events are picked up sporadically in Firefox and not at all in Safari. A better pattern for now is to just emit events which rely on current route/href from within views themselves.

---

I haven’t yet looked into why, and perhaps it’s a misunderstanding of the suggested flow above, but I have found that to get this to work 100%, RENDER needs to be explicitly triggered within the NAVIGATE callback (def a hack!). I’ve added examples, view console to see behaviors.

Explicit Render

The RENDER event is picked up after NAVIGATE because we force a re-render

emitter.prependListener(state.events.NAVIGATE, function () {
  setTimeout(function () {
    emitter.emit(state.events.RENDER)
  })
  emitter.once(state.events.RENDER, function () {
    console.log(state.route)
  })
})

Demo: https://choo-navigate-render-hack.glitch.me Code: https://glitch.com/edit/#!/choo-navigate-render-hack

Without Explicit Render

The RENDER event does not fire until the next tick

emitter.prependListener(state.events.NAVIGATE, function () {
  emitter.once(state.events.RENDER, function () {
    console.log(state.route)
  })
})

Demo: https://choo-navigate-render.glitch.me Code: https://glitch.com/edit/#!/choo-navigate-render