How to write Links with Backbone.js? - backbone.js

As I am working on a backbone application, I came across the Router. My problem is, that i do not know, how to put links onto my website, so that backbone routes them. Imagine the following constellation:
Homepage: localhost/mypage
Now I want to set up a -Tag, that brings me to another page, like:
localhost/mypage/#!/subPage/subSubPage
Can someone help? How does the route and the tag look like?
Thanks!
EDIT 1:
Imagine situation:
I am at: http://localhost/page/#!/de/home
Click on with href: http://localhost/page/#!/de/masterplaner
It brings me to: http://localhost/page/#//de/home=undefined&page=#!/de/masterplaner
Why?
EDIT 2:
The route I want to be called is:
!/:language/masterplaner

Related

Access url with params that is directly pasted in search bar in next js

So i know how dynamic routing and stuff works when you are navigating from inside the next.js app using or Router.push(). What I don't understand is say i have a URL:
http://localhost:3000/jhondoe
Now i directly paste this URL into the browser. How will next know which page to render? Keep in mind that the Jhondoe part is not exactly a page but a path param that i need to access to display stuff related to Jhon doe.
In next you can do something like [id] that is create a folder like this in pages and put your actual page here.

How to clear ui-router hash on page change?

I'm using ui-router 1.0b3 with angular 1.5.x. Also using html5Mode(true). The hash's are not being used for the paths, they are just for the specific page it goes to.
I want to be able to go to
http://example.com/app/page#tab3
route name: app.page
Then navigate to another page, say route name: app.another, it will take me to the page, but the # stays. I don't want the # state to follow the navigation. Both pages need the same "app" parent. If I go to another it should not go to "http://example.com/app/another#tab3" which is what is is doing.
It did not do this on ui-router 0.3.1
I tried removing the hash during the transition:
$transitions.onBefore({exiting: 'app.**'}, function(trans) {
trans.params("to")["#"] = null;
$location.hash("");
});
but that doesn't work at all.
Help? I think this might be a bug, but I can't figure out a fix.
https://github.com/angular-ui/ui-router/issues/3245
I have the same problem. I found solution to the problem of ui-router developers.
You can clear out the hash by clearing out the parameter (parameter named '#').
In templates:
<a ui-sref="app.tasks({'#': null})">text</a>
In javascript code:
$state.go('app.tasks', {'#': null});
P.S. I use angular-ui-router, version is 1.0.0-beta.3
More information here:
https://github.com/angular-ui/ui-router/issues/3017

master Detail with ui-router of angular

I am new to angular and was looking for an example of a master detail. I found one: http://embed.plnkr.co/DBSbiV/App.js, but this is using angular's ngRoute. As I heard ui.route is the state of the art kind of way to handle routing due to it is more flexible.
I want to have both master and detail on one template, so I tried to solve it with multiple named views like in https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views. But I now have to problem, that I don't know how to create a link in the master list to the detail view with .. I tried with ... but don't know what to put right here, because I have only one state with multiple views.
Can you tell me whether I'm on the wrong way or what I put into this ref to link to my detail?
Thanks in advance
Markus
You don't actually need named views for this. Just nested views. Lets imagine you have a list of blog posts. You have one state called blogs. And another state called blogs.edit, which takes a parameter of the postId.
Your blogs.html (the master list) could look something like this:
<a ng-repeat="post in blog.posts" ui-sref="blogs.edit({postId: post.Id})">{{post.title}}</a>
<div ui-view></div>
This will render a list of anchor tags, and a nested details view under.

angular and ui-router - opening a detail page

I'm sure ui-router is very useful when a site gets complex, but man is it indecipherable on a simple site.
I've got a table with a bunch of records on a summary page called /records/. (not concerned about how this page was built - it's built with ng-grid)
I want to click on record 102 and have it open /records/102 where I will use the id to show deets of 102.
This plunker is never going to work, but I've tried to put the basics in:
http://plnkr.co/edit/qfEaMM8Ihgg8gCUAMHbE?p=catalogue
enter code here
This: {{row.entity['id']}} does give me the record ID I'm looking for - I've got that working. It's a matter of how I get it to routes.js where it says url: '/records/:recId' and then how I get it to appear in the URL when it goes to the new page.
How do I do that?
(P.S. 'Submit Error: links to Plunker must be accompanied by code'. What??)
To redirect to /records/102 you just use a normal html anchor like this:
<a href="/records/{{row.entity['id']}}" ...>
Yo get the value out in your RecordsController you need to use the $routeParams service, inject it and use it like this:
$scope.recordId = $routeParams.recId;

Backbone.js: Disallow backbone history

I came on this site to research a problem that I've been having regarding negating Backbone.js's history for certain elements. Thankfully, I came across this answer: here.
While it had provided a solution for me, the ultimate result was partial.
PROBLEM:
I am using Backbone.js for my navigation. I navigate to a route called "Portfolio" and then a number of images show up which can then be clicked again to view information. In order to render this information, I have it going through another route. The aforementioned resolution had me assigning the following code to negate these Portfolio links from being part of the History:
$(this).bind('click', function(e){
theSiteController.navigate('portfolio/portfolioSelection/' + i, {trigger:true, replace: true });
});
I had applied replace: false to the .navigate and it worked: whenever I hit the Back button, I would skip back to the origin page that I came from. HOWEVER, when I hit the Forward button in my browser, it points me back to the Portfolio link that I had clicked before, which looks like this:
#portfolio/portfolioSelection/4
I have it set to a different View, so I'm wondering if that has something to do with it.
QUESTION:
When I click the Forward button in my browser, how would I re-route it so that way it goes to
#portfolio
instead of
#portfolio/portfolioSelection/4
To view the site, please click here.
I apologize if this has been answered, but I can't seem to find a proper resolution.
Thank you, in advance, for your help!

Resources