Ember routes specifying a different root url - javascript

I've an application running on my wamp server. The directory structure looks like this
Wamp/www/applicationliveshere However I've an ember application within the same directory and it's structure looks like this Wamp/www/emberApp/applicationliveshere
I've set up my php project using REST so that I can access the my data using eg. Get http:localhost/emberApp/videos will return all the videos in the database as Json to the client. However my problem is in Ember I'm unsure how to set up my routes to use localhost/emberApp/videos. Currently each time I load the page the controller is using localhost/videos and returning with the a 404 Not found. I am using 'ember-data.js' to handle my models. And I have created a Store as follows
Videos.Store = DS.Store.extend({ revision: 12, url: "http://localhost/emberApp/"})
My Videos route is defined like this
Videos.VideosRoute = Ember.Route.extend({ model: function(){
return Videos.Video.find();
}
});
I also have the path set as follows
Videos.Router.map(function({
this.resource('videos', {path: '/'});
});
So to clarify I want all my routes to begin with http://localhost/emberApp/.....
But at the moment I have http://localhost/....
Any ideas?
Thanks in advance.

For the behavior you need you should also define the namespace on the adapter additionally to the url in the store.
For example:
App.Adapter = DS.RESTAdapter.extend({
namespace: 'emberApp'
});
Videos.Store = DS.Store.extend({
revision: 12,
url: "http://localhost/",
adapter: App.Adapter
});
This will result in http://localhost/emberApp/ as your base url.
Have also a look here for info on that.
Hope it helps.

Related

http://localhost/admin/ route not working but works with http://localhost/admin/index.html

Hi Everyone I am working on an AngularJS project.
My project works fine on a route like: http://localhost/
But I have an admin panel like this: //localhost/admin/
So when I open this it's not working
but when I put a complete URL like this: localhost/admin/index.html#
then it works.
Project Structure is:
Please Have A look on Project Structure
If you are running the website in IIS you need to set Default Documents or check if it is set. I had the same issue a while ago and found the not all default were set.
You can create different states as per your project. For ex:
1. /login
2. /admin
3. /edit
and then you can mention configuration for each state with the html page you want to access. then you can use //localhost/admin and it will be referred by /admin state which you have created.
Code should be something like this
$stateProvider.state('admin',{
url:'/admin',
controller: 'AdminController',
templateUrl:'admin/index.html',
resolve: {
loadMyFiles:function($ocLazyLoad) { // this can be used for lazy loading of files
return $ocLazyLoad.load({
name:'MYPROJECT',
files:[
'styles/admin.css'
]
})
}
}
})

EmberJS 2 route dynamic segment in not nested routes undefined

Really new to ember and trying to setup basic (in my mind) routes.
I have calendars resource and I want to display individual calendars.
My app/router.js has the following:
this.route('calendar', {path: 'calendars/:calendar_id'}, function () {
this.route('show');
this.route('edit');
});
this.route('calendars', function(){
this.route('create');
});
Folders are as following:
app/routes: [
calendars: [create, index],
calendar: [edit, show]
]
app/templates: [
calendars: [create, index]
calendar: [edit, show]
]
In app/routes/calendar/show.js:
import Ember from 'ember';
export default Ember.Route.extend({
model(params) {
return this.store.findRecord('calendar', params.calendar_id);
}
});
Problems start when I go to http://SERVER/calendars/5/show (5 is a :calendar_id part, SERVER is what hosts ember app) :
when I log params - they are undefined
In dev tools I see that Ember somehow makes a POST request to my server as http://SERVER/calendars/5
(a :calendar_id part, SERVER is on same domain and where my back-end resides).
This happens regardless if I comment out model() function in app/routes/calendar/show.js file.
Apparently Ember knows what calendar_id to use for that request.
But I don't know where that call to the server happens:
If I comment out model(){} altogether, my template renders model record (the calendar record that Ember fetches).
If I on the other hand try to log params in model() and I comment out this.store.findRecord part out, the params are undefined and it raises an error.
I thought at first that it is my DS.RESTAdapter since I have defined updateRecord changes to fake PUT request (my server does not allow that), but I commented out the whole file and it still does this query.
I've cleaned both dist/, tmp/, upgraded to 2.9.0, but it does the same thing.
I have no controllers defined
How does Ember make POST request if model() hook is missing from route, I have no controllers difined. Also how do I fix it so that it works? ;p
Edit [2]:
I am trying this now and I think it kinda works, but looks ugly:
this.route('calendars',{ path: '/calendars'}, function(){
this.route('create');
});
this.route('calendar', { path: '/' }, function () {
this.route('show', { path: '/calendars/:calendar_id/show' });
this.route('edit', { path: '/calendars/:calendar_id/edit' });
});
this.route('index', { path: ''});
Ember is smart enough to generate a default route if you do not create one, and a default model if you do not create a model function.
It does this based on the routes name ie if your route is "calendar" it generates a model function based on the "calendar" model.
Try explicitly define your route path with the parameters as per ember docs:
https://guides.emberjs.com/v2.9.0/routing/defining-your-routes/
this.route('calendar', function () {
this.route('show', { path: '/:calendar_id/show' });
this.route('edit', { path: '/:calendar_id/edit' });
this.route('create');
});

filesystem based emberjs app

I'm building a filesytem based emberjs-app. But unfortunately the security won't allow me to push stuff to the history (see e.g. this but i guess that applies to all browsers).
setting the locationtype to none is fine, but I would still like to utilize the back and forward buttons and urls of the browser.
Is there a way to configure this (maybe setting the base-url to index.html, without rewriting the build process)?
edit
I call the url from my browser like this: file:///path/index.html.
in my routes.js and fileroute.js I've got this workaround:
// routes.js
export default Router.map(function() {
// this route only redirects to main
this.route('fileroute', {path: 'index.html'});
});
// routes/fileroute.js
// only for running app on filesystem
export default Ember.Route.extend({
redirect: function() {
this.transitionTo('fileroute.projects');
}
});
So I guess each hash-change would already effect the files-url
file:///path/#differentroute
also for
file:///path/#index.html/childRoute

Using backbone.js routing with Jekyll

I am generating a static site using Jekyll. I am using backbone.js to do few routings.
Suppose the home page is at localsite.com... I am not sure how to generate routes for the following URLs.
http://localsite.com/hulk &
http://localsite.com/thor
The hulk and thor are the names to be routed.
and my backbone.js router is as follows:
<script>
var AppRouter = Backbone.Router.extend({
routes: {
":name": "nameRoute" // should match http://localsite.com/anything-here
}
});
// Initiate the router
var app_router = new AppRouter;
app_router.on('route:nameRoute', function(name) {
console.log(name);
})
Backbone.history.start({pushState: true});
</script>
I am not able to get this working. Is there something I am missing?
Will I be able to do this routing with Jekyll?
My Jekyll's _config.yml has
permalink: pretty
How do get these routes working?
Are there any other suggestions? My goal is to get a similar routing when hosted on github pages.
As far as the routing goes, it is pretty straight forward. The second part is the name of the function that will be called, which should be defined inside your router. So just change your code to this and it should work:
var AppRouter = Backbone.Router.extend({
routes: {
":name": "nameRoute" // should match http://localsite.com/anything-here
},
nameRoute: function(name){
console.log(name);
}
});
// Initiate the router
var app_router = new AppRouter;
Backbone.history.start({pushState: true});
If you run into trouble with pushState and getting rid of the backbone-default hashtags, check out this SO question BackboneJS - Router issues - how to get clean URL's (particularly important for local links, if you don't want to keep reloading from the server), and here is an example of a site getting rid of their #: http://artsy.github.io/blog/2012/06/25/replacing-hashbang-routes-with-pushstate/

How do I set the root URL in Ember

My Ember app lives in example.com/path/to/ember_app.
My problem is that Ember seems to be rooting everything based on the site root, not the root of the application, so when I would expect ember to root to:
example.com/path/to/ember_app/**news_items**
I'm getting a 500 (Internal Server Error) (GET) on example.com/news_items.
MyApp.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('example.path');
}
});
this should help you, this basically redirects the index route of your app to the example.path route.

Categories