0

In my application I need to have certain sections of my app hard refresh on transition. I have gotten pretty close by creating another Location type I call passthrough and then separating out the routes into a separate file. The passthrough location option essentially attempts to replace any where that history state was previously pushed and instead just location.href = the new pathname. The problem I am having now is that while this more or less works the router has already triggered a run loop and the view is rendered for a split second before it is refreshed. Not super familiar with how to control the run loop so thought maybe someone could help.

/location/passthrough.js

import Ember from 'ember';

/* Implement history API that hard refreshes on transition */
export default Ember.Object.extend({
  implementation: 'passthrough',
  rootURL: '/',

  init() {
      this.set('location', this.get('location') || window.location);
      this.set('baseURL', Ember.$('base').attr('href') || '');
  },

  setURL(path) {
    this.get('location').href = path;
  },

  replaceURL(path) {
    this.get('location').href = path;
  },

  getURL() {
    var rootURL = this.get('rootURL');
    var location = this.get('location');
    var path = location.pathname;
    var baseURL = this.get('baseURL');

    rootURL = rootURL.replace(/\/$/, '');
    baseURL = baseURL.replace(/\/$/, '');

    var url = path.replace(baseURL, '').replace(rootURL, '');
    var search = location.search || '';

    url += search;
    url += this.getHash();

    return url;
  },

  onUpdateURL() {
    if (this.get('location').pathname === this.getURL()) {
      return;
    }

    window.location.href = this.getURL();
  },

  formatURL(url) {
    return url;
  },

  getHash: Ember.Location._getHash
});

/initializers/location.js

import PassThroughLocation from '../location/passthrough';

export function initialize(instance) {
  instance.register('location:passthrough', PassThroughLocation);
}

export default {
  name: 'location',
  initialize: initialize
};

Then in my router I have location:'passthrough' set.

Part of my reasoning to do this is for certain pages I want to include additional modules and set separate CSP. Basically when you hit /secure/path the server side sets a stricter CSP in the headers and loads a handful of modules only used in this section of the website.

UPDATE:

Overriding the behavior of a link-to component seems possible although pretty intimate.

import Ember from 'ember';

export function initialize() {
    Ember.LinkComponent.reopen({
        _invoke: function (event) {
            window.location.href = event.target.pathname;

            return false;
        }
    });
}

export default {
  name: 'location',
  initialize: initialize
};
BillPull
  • 6,853
  • 15
  • 60
  • 99
  • 2
    Why do you need to refresh you page in an ember app? It doesn't seem very emberish. – 0xcaff Oct 21 '15 at 01:49
  • Is this what you want ? On reaching certain child routes, You need one or more of its parent route's model to be refreshed from server. – acid_srvnn Oct 21 '15 at 07:21
  • @caffinatedmonkey it definitely is not emberish but your comment is pretty much just noise its still a problem I need to solve for. AcidBurn yes basically I want certain routes to hit the backend server before rendering. Want to keep my front end code base in the same framework – BillPull Oct 21 '15 at 19:14
  • Actually caffinatedmonkey is right on the money. What you should be doing is refreshing the model within the Route and possibly resetting controller state. The noise is in your head... – Christopher Milne Oct 21 '15 at 20:20
  • @ChristopherMilne how would I be able to change my CSP on the fly in a situation like that – BillPull Oct 21 '15 at 20:22
  • @BillPull can you post some code or describe your situation in detail? There are potentially many ways to handle this. – Christopher Milne Oct 21 '15 at 20:29
  • @ChristopherMilne other than the code in the post there is just some backend code that sets the CSP headers depending on which route you hit. – BillPull Oct 21 '15 at 20:42
  • is it an option for you to authenticate via an api client-side? failing that, to do what you originally requested, is it an option for you to replace link-to helpers with actual anchor tags (binding the href attribute)? that would give you the behaviour you are looking for without all the history manipulation – Christopher Milne Oct 21 '15 at 20:54
  • @ChristopherMilne would it be possible to alter the way `link-to` works? I think rather than replace all of the helpers & their functionality on the other pages it could be possible to load and insert a new link-to implementation – BillPull Oct 21 '15 at 21:17
  • On reaching any child route, The `didTransition` hook of each parent route also gets triggered. Use some logic there to update the model. You need not refresh the page. – acid_srvnn Oct 23 '15 at 07:12

0 Answers0