I try to study and use Backbone/Marionette in my project. Now I stuck with Router navigation which work not as I though it should.
class MyApp.Router extends Marionette.AppRouter
appRoutes :
'info/:place/(:what)' : 'places_page'
MyApp.Controller = ->
places_page: (place,what)->
console.log 'Triggered places_page'
MyApp.addInitializer( ->
controller = new MyApp.Controller()
new MyApp.Router
controller: controller
Backbone.history.start( pushState: false )
)
MyApp.vent.on('do:search', ->
console.log 'triggered do:search'
place = 'Moscow'
what = 'Пицца'
info_model.set place: place, item:what
new_url = 'info/'+where+'/'+what
if new_url != decodeURIComponent(Backbone.history.fragment)
Backbone.history.navigate(new_url, {trigger: false})
On initial load of site.com/#info/Budapest/Vine page or reload it, I get Triggered places_page message as I expect.
But when I fire do:search event which update url to site.com/#info/Moscow/Пицца, I get Triggered places_page again! So it reload all my views from scratch instead of just change url and re-render one model.
What I can do wrong here?
Update 2:
Found strange thing. If I use latin letters in new url, everything work like it should.
But if I use cyrillic in new url path, it will trigger route function.
Backbone: 1.0, Marionette:v1.0.3, jquery: 1.9.1
Mystery solved!
That happens because of non-latin symbols in url.
Correct code:
new_url = 'info/'+encodeURIComponent(where)+'/'+encodeURIComponent(what)
if new_url != Backbone.history.fragment
Backbone.history.navigate(new_url, {trigger: false})
Because Backboune.navigate don't execute navigate if url didn't change and trigger is false by default, I can write it simple like that:
new_url = 'info/'+encodeURIComponent(where)+'/'+encodeURIComponent(what)
Backbone.history.navigate(new_url)
Backbone.history takes an object when starting. Try this syntax in CoffeeScript:
Backbone.history.start
pushState: false
In addition, pushState is false by default, so you can just have Backbone.history.start()
Does this solve your issue?
Proper URL encoding is required. I couldn't find this in the docs of Backbone related to the router functionality.
I had the same issue, alas with spaces in the query part, i.e.:
#app/terms?filter=java ee
Together with the encodeURIComponent solution as described in your answer, I also found the following lines of comments in backbone.js (1.0.0), pertaining to the navigate function:
// Save a fragment into the hash history, or replace the URL state if the
// 'replace' option is passed. You are responsible for properly URL-encoding
// the fragment in advance.
Related
I'm trying to listen to a MessageEvent sent with postMessage in my Angular 2 component.
My first attempt was simply doing:
window.addEventListener("message", this.handlePostMessage.bind(this));
And then in ngOnDestroy:
window.removeEventListener("message", this.handlePostMessage.bind(this));
However this didn't work as expected. If I navigated to another route and back, there would be two event listeners registered.
So instead I've been trying to decorate the method with HostListener, but I can't get this working when using prerendering (Angular Universal with .NET Core using the asp-prerender-module).
#HostListener('window:message', ['$event'])
private handlePostMessage(msg: MessageEvent) {
...
}
That gives me the following error on page load:
Exception: Call to Node module failed with error: Prerendering failed because of error: ReferenceError: MessageEvent is not defined
Is there a workaround for this?
You're getting this error because MessageEvent is not defined. You must import whatever file defines this.
My #HostListeners look like this:
#HostListener("window:savePDF", ["$event"]) savePDF(event) {
this.savePDFButtonPushed();
}
and you can read more about them here:
https://angular.io/guide/attribute-directives
However, I'm currently experiencing the same issue you are -- that if I navigate to another route and back, I now receive two events. And that is using #HostListener. :-( However I haven't upgraded Angular in a while (currently using 4.4.6), so maybe they've fixed it since that release.
**Edit: Just upgraded to Angular 5.1.0. The 'duplicate events' #HostListener issue remains. :-(
Edit #2: I tried also using window.addEventListener like you tried, and also had the same issue, despite using window.removeEventListener in ngOnDestroy().
This lead me to dig a little deeper, where I found some code I had added to listen to messages from a child iFrame. Any chance you have something similar in your code?
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen to messages from child window ("unsign" and "savePDF") and pass those along as events to Angular can pick them up in its context
eventer(messageEvent,function(e) {
window.dispatchEvent( new Event( e.data ) );
},false);
This had been in my page's constructor. I protected it so it only executed the first time the page was constructor, and now all is well.
Is it possible to edit the placement of the hashtag in hashmode from /#/ to /#?
When html5mode is not supported (in older browsers IE9 and down) and I get hash URL / hashbang mode
what i get :
'index.com/#/path/id'
What I would like to get :
'index.com/path/#id'
Is it possible to edit the URL / placement of the hash-tag from within the angular app config ? Or is what I want an unaccepted/invalid URL for hash mode?
add this code in your router page
$locationProvider.html5Mode(true);
You cannot remove # from URL in a browser that does not support history API.
From AngularJS Doc, when mode=true in html5Mode :
enabled – {boolean} – (default: false) If true, will rely on
history.pushState to change urls where supported. Will fall back to
hash-prefixed paths in browsers that do not support pushState.
From $locationProvider source code, if history.pushStatefails, it restores the old URL values:
function setBrowserUrlWithFallback(url, replace, state) {
var oldUrl = $location.url();
var oldState = $location.$$state;
try {
$browser.url(url, replace, state);
// Make sure $location.state() returns referentially identical (not just deeply equal)
// state object; this makes possible quick checking if the state changed in the digest
// loop. Checking deep equality would be too expensive.
$location.$$state = $browser.state();
} catch (e) {
// Restore old values if pushState fails
$location.url(oldUrl);
$location.$$state = oldState;
throw e;
}
}
I'm looking for something to accomplish in Backbone. Here is the explanation.
I have backbone routes like
{
'': 'defaultRoute',
'test': 'test',
'testing': 'testing'
}
Assuming my root url is '/routes'
Now when I say 'router.navigate('test', {trigger: true});' url changes to /routes/test.
Similar way when I call 'router.navigate('testing', {trigger: true});' url changes to /routes/testing.
But when I call 'router.navigate('', {trigger: true});' url changes to /routes/.
You know i didn't expect that / at the end. I never passed that. It should have been back to root url i.e. '/routes'.
Adding / at the end makes lot of difference/meaning. Checkout 'http://googlewebmastercentral.blogspot.in/2010/04/to-slash-or-not-to-slash.html'
Any fix for that (i.e. not having / at the end for default route)?
Try to override Backbone.History.prototype.navigate.
Copy default function and change this line :
var url = this.root + fragment;
to :
if(this.root !== '/' && fragment === ''){
var url = this.root.replace(trailingSlash, '');
}else{
var url = this.root + fragment;
}
First things first:
If your application is not being served from the root url / of your
domain, be sure to tell History where the root really is, as an
option: Backbone.history.start({pushState: true, root:
"/public/search/"})
Backbone#History
In your case, it is most likely to be something like root: "/routes". Something you need to keep in mind is that your website is seen in the browser as either a resource or a remote folder, therefore the default route without a trailing slash may not fully work by just leaving it as "" because that means usually "the current folder". You could try to set your root url as root: "/" instead (just as it should be by default) and create a "routes" resource as your default route, something like the following:
{
'test': 'test',
'testing': 'testing',
'routes': 'defaultRoute',
'*': 'catchAll'
}
Another recommendation that I am doing to you (as you can see it above) is to set your a catch all URL at the end in case someone enters a non-existent one, and you can also use it to redirect your users to your default route.
// your code above ...
defaultRoute: function() {
// your default route code...
},
catchAll: function() {
this.navigate('routes', {trigger: true});
}
// your code below ...
Finally, by any reason mess up with Backbone URLs manually, you are highly risking yourself to break the whole thing AND if in the future the API changes it should be easier to update if you just follow the intended use.
Update:-
This has been already fixed in Backbone's latest version. I asked a question on there forum and found the answer. I'm adding it here as an answer if it helps anyone who is looking for the same thing.
https://github.com/jashkenas/backbone/issues/2871
I have multiple routers in my app, in general way it looks like this:
// Start backbone.js
if (!Backbone.History.started) {
Backbone.history.start({pushState: true, hashChange: false});
}
// Perform some RPC requests ...
// Depending on user role, received from the server should be created suitable router:
var router;
if (typeof app.user.role === 'manager') {
router = new routers.manager();
} else {
router = new routers.guest();
}
Problem is that after page is loaded and script is executed routers do not do. anything. They do not load route for current url automatically. So, i had to fix it this way (i am not sure that it is a right way):
routers.guest.initialize = routers.manager.initialize = function() {
var defaultRoute = 'default';
if (typeof this.routes[Backbone.history.fragment] !== 'undefined') {
this[this.routes[Backbone.history.fragment]]();
} else {
this.navigate(defaultRoute, true);
}
};
It is working fine, except one bug: when i use route with params, for example /reset-password-confirm/:code - it is unable to find in in routes property. I could write some more code to fix it, but i suppose that i am doing something wrong, if i have to write such things - as i understand router should handle routes just after it was created.
So, questions:
Why my router(s) does not handle routes for current url after it is being created? Perhaps i need to start backbone history later? (but this bug will happen again later then)
How it is possible to make routes with params like /user/:id work there?
Perhaps it is bad idea to re-create routers? Perhaps it is better to create all of them one time?
P.S. I've tried to create both routers and keep them, also i've trie to call backbone history start method after all routers were created.. but this didn't help :/
Assuming you route is declared as the following:
routes : {
'/user/:id' : 'user'
}
Your initialize code is not working because when you initialize your router with a url such as: /user/1234. Backbone.history.fragment will be /user/1234 (not /user/:id). Since the this.routes object doesn't have a key of /user/1234, your else clause calls the default route.
If you first instantiate your router then call Backbone.history.start(), you will be able to remove your router initialize code. When you navigate to a url as /user/1234 your router will match the /user/:id route and call the user function.
The following should work for you without adding your initialize code:
var router = (app.user.role === 'manager') ? new routers.manager()
: new routers.guest();
Backbone.history.start({pushState: true, hashChange: false});
Looking at the code, seems like you're starting the backbone history before initializing any routes. That's most likely not goning to work.
The correct way of doing this type of seperation is by creating all the routes based on the role received from the server and then start the backbone history. Here's an SO thread that talks about it with code samples as well : How to protect routes for different user groups
This is driving me crazy right now. I cannot get a simple router to work...
jQuery ->
class MyRouter extends Backbone.Router
routes:
"" :"index"
"/list" :"showList"
"/item/:id" :"showItem"
index: =>
alert "index"
showList: =>
alert "get the lists"
showItem: (id)=>
alert "the item #{id}"
#app = window ? {}
#app = window.app ? {}
#app.myRouter = MyRouter
Backbone.history.start()
I always get this error:
index.js:50Uncaught TypeError: Cannot call method 'start' of undefined
and I saw this: Cannot call 'start' of undefined when starting backbone.js history.
but it did not help =(...
I am sure this is an easy one but I am some sort of stuck here ...
please help...
You didn't create an instance of a Backbone.Router, so Backbone.history.start() will fail.
#app.myRouter = new MyRouter()
The link you posted tells you exactly what the problem is:
TypeError: Cannot call method 'start' of undefined**
Hmm, for some reason Backbone.history is undefined, and so there is no start method on it. It turns out that Backbone.js creates an
instance of Backbone.History (upper case ‘H’) called Backbone.history
(lower case ‘h’) once a controller has been created that has at
least one route specified on it. This makes sense, as history
management is only required if there are routes to respond to.