If I'm on a page in my Ember app, and edit the URL manually or use a bookmark that identifies another route within the same app, by default the page gets reloaded, losing any transient state it had, rather than just transitioning as it would have if I'd followed an Ember-controlled link within the app. Is there a built-in feature of Ember that's well integrated into its routing features which can prevent that and just transition instead?
Details:
With Ember's default routing, the URL itself changes rather than just the fragment identifier ("hash"). E.g., in the Quick Start example, if you're on http://server/scientists and want to look at the list of programmers instead, you go to http://server/programmers.
If you do that by clicking a link handled by Ember, that works within the loaded page just fine (I'm assuming Ember uses the History API under the covers to replace state without page reload). No page reload is caused.
But if you're on http://server/scientists and click a bookmark to take you to http://server/programmers (or edit the URL manually), it reloads the page, losing any transient state the page contained.
In contrast, in an app that uses fragment identifiers for routing (like Gmail), the equivalent change of (say) http://server/#scientists to http://server/#programmers does not cause page reload, even if you manually edit the address bar or use a bookmark. (Of course; it's just a change to the fragment identifier, not the actual URL.)
Is there built-in handling in Ember that's well integrated into its routing features that can make it handle that use case without reloading? Either by using a fragment identifier instead of changing the URL, or with some History API feature? (Although I can't think of a History API feature that could do it.)
In config/environment.js file, include ENV.locationType= 'hash'; by default it would be set to auto.
For more information - http://emberjs.com/api/classes/Ember.Location.html
Related
We're integrating SAP Commerce 2005 and Spartacus 2.0.3 with CDS (Context-Driven Services). We followed the instructions from https://sap.github.io/spartacus-docs/cds-integration/ and we got it work right.
Nevertheless, we've noticed one issue.
When we clear the site data (either from Chrome DevTool or via browser Settings), the cookie named profile.consent.given is not being set anew while refreshing the page - even though the PROFILE consent has consentState "GIVEN" in local storage in spartacus-local-data > anonymous-consents > consents.
Initially I thought that it's just not visible in DevTools, but when I've added the url parameter ?profileTagDebug=true, in the console there is a log saying:
"[Profile Tag] No cookie found with name profile.consent.given".
When I set this cookie manually with value true, everything starts to work just fine, all other needed cookies and local storage data responsible for tracking users behavior is being set properly.
Do you see any place where we could have done something wrong, which may have caused this cookie to work improperly? Which module or component of Spartacus library would be of any clue in resolving this issue?
Edit: the reason of this strange behavior was in profile tag created by our team in CDS. It contained:
"consentListener": "type":"cookie","cookieName":"profile.consent.given","cookieValue":"true"},
which made the cookie profile.consent.given necessary while it shouldn't be. Using profile tag without this part made all work just fine.
With Spartacus, this cookie doesn’t make sense anymore. It is created by the Commerce backend and works best in combination with an accelerator frontend. Cds-spartacus in combination with ProfileTag relies on the anonymous consents or the user consents (depending on the user being logged in or not) loaded by Spartacus. More information about anonymous consents can be found here: https://sap.github.io/spartacus-docs/anonymous-consent/.
Just a quick FYI about the CDS-Spartacus integration: the profile tag script is pulled from the configured URL by Spartacus, and the script is doing all the event and data "scraping". The cookie is also being placed in the browser by the script.
Your question and this comment lead me to think that the script is not handling this case.
I'm not even sure if it should handle it, so it might be a better idea to contact CDS team directly about this one.
Folks,
I am pretty sure I am not the first one to stumble on this problem. But somehow I am unable to find any relevant resources out there.
Here is my issue, I have a backend in Django and my front completely written in Reactjs- React Router - Redux (nice combo right).
when entering the url webhost.com/, django provides me with a page with links to a bundle that is my whole react application and different stylesheets
The problem arise when I want to refresh a page, the browser still tries to query the server even though a route exists in my react-router configuration.
I had a look at the answer here (catch-all option) React-router urls don't work when refreshing or writting manually , but I don't quite understand it and I am afraid to have a new redux state everytime Django will provide the user with a new page.
You can setup up a wildcard url pattern that will render the same view that gets rendered when a request is sent to webhost.com. I don't know if that's going to retain your store though.
This is a pretty newbie question. However, in EmberJS, I've found that both of the methods work for linking to the blog page in my application.
<p>{{#link-to 'posts'}} See my blog{{/link-to}}</p>
See my blog
Is it better to use {{link-to}} in EmberJS? How come?
The difference is that the {{link-to}} component will navigate to the specified route within the current running Ember application, while <a href="posts"> will do a new browser request to that location and re-start your Ember app at that route. You should use {{link-to}} since you'll be using the Ember internals to navigate within your single-page application and it will be a smoother user experience.
While they both can work, watch your browser closely and you'll see the anchor tag will give you a page refresh and re-launch your Ember app (though in the right location). Using a {{link-to}} will feel faster since Ember is presenting the new page via javascript rather than restarting after a page refresh. It's the difference between navigating within a single-page application, and jumping into a SPA from an external page.
While Ember does render an anchor tag in place of the {{link-to}} at run-time, it interjects to stop the default anchor tag behaviour. The docs explain it like so:
By default the {{link-to}} component prevents the default browser
action by calling preventDefault() as this sort of action bubbling is
normally handled internally and we do not want to take the browser to
a new URL (for example).
(from https://emberjs.com/api/classes/Ember.Templates.helpers.html#toc_allowing-default-action)
Also, with the {{link-to}} component you can pass a model directly into the route. This is a bit more advanced, but the Ember guides have some good examples.
https://guides.emberjs.com/v2.13.0/templates/links/
Is it possible to reenter the loading state manually?
Right now I have a template that matches the loading rule mentioned at their webpage:
Ember will find a loading route at the above location if
[...]
a properly-named loading template has been found, e.g.
bar/loading
foo/loading
loading
When transitioning to the page, it uses this template, which is great. However, I would like to enter that same loading state while my web request busy. Currently, I am reimplementing that template in the page and toggling it, which duplicates code. I would rather tell ember when I am in loading state or not manually.
Edit: In response to comment, the web requests both set and push data to the model (search button and "infinite scroll" pagination)
You could use transitionToRoute() to transition into (and out of) a loading route while your request is in progress.
I am currently looking for a feasible approach to store form data globally in my Ember Application. The state of the form must get reflected in the URL. I have not yet seen an Ember example managing this kind of state, since routes always revolved around certain entities/models that get displayed by an Application.
Soo.. what is my Usecase?
When the user enters my app, he may modify some settings of my app in a form (e.g. location and time). I would like to have this information as part of the application state. Why? The state of the settings could be shared by the user with others users easily, as he could share the current URL of the application.
This is my current idea for an implementation:
I could store the current settings in a global location, e.g. in my router.
This enables me to access the stored settings in the methods serialize and deserialize of my main route (and potential other routes).
What's your opinion on my current idea for a solution approach? Is there maybe a appropriate Ember feature i have missed?