Having lots of trouble with routes and a navigator

1

I have an app that, for server configuration purposes that cannot be changed, has to reside in http://localhost/csp/acb/citas/. Therefore, I created the following app.

App.Router.map(function() {
    this.route("index", { path: "" });  
    this.route("main", {path: "main"});  
});

App.Router.reopen({
  rootURL: '/csp/acb/citas/'
});

var items = [
	{item: "Main", url:"main"	},
	{item: "Work", url: "work"	},
	{item: "Conf", url: "conf"	}
];

App.ApplicationController = Ember.Controller.extend({
	items: items
});

And the following template (by the way, this is a component).

<script type="text/x-handlebars" id="components/bs-header">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Bootstrap theme</a>
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
    {{#each items}}
    {{log item}}
      <li>{{#link-to url item}}{{item}}{{/link-to}}</li>
    {{/each}}
    </ul>
  </div><!--/.nav-collapse -->
</script>

When I run the app, i get the following error.

Uncaught Error: More context objects were passed than there are dynamic segments for the route: main

When I include the /csp/acb/citas/ to the route and url of the template, i get the following.

Uncaught Error: Assertion Failed: The attempt to link-to route ‘/csp/acb/citas/main’ failed (also tried ‘/csp/acb/citas/main.index’). The router did not find ‘/csp/acb/citas/main’ in its possible routes: ‘loading’, ‘error’, ‘index’, ‘main’

This is really frustating since I thought this would be a simple task to perform. Please help.

2

Hello ember community. Due to time constraints, and a steeper learning curve for Ember, I will have to put on hold my ember project and go back to continue developing it using Backbone.

My previous post about components had a workaround that I could live with. But the problem I experienced about routes, explained in this thread, was a deal breaker for me. The router in Ember is very different from the one implemented in Backbone and I was simply not able to understand it and implemente what I intended.

As soon as I get help with this issue I intend to continue with my Ember efforts. Until then…

3

I think your first error is probably due to the fact that the route requires a slash in the path argument.

this.route("main", {path: "main"}); should be this.route("main", {path: "/main"}); or even just this.route("main"); should work by default.

You also shouldn’t need to explicitly put the index route in your router. That might save some confusion. The second error might be resolved by fixing the first but if not a JSbin or gist where you reproduce your error would be helpful to try to debug your issue.

4

I tried your suggestion it did not work. I would put the code in JSBIN but I am not sure how it would work since I think the problem I have is becuase of the fact that the app is on a non-root path on the server.

Thanks for the reply.

6

I don’t know if this will be helpful but I tried to build a component like your bs-header component. It is important to remember that components don’t inherit any scope from the route so you have to pass everything in that you want to display or iterate over.

You can see my attempt here.

It doesn’t solve your rootURL issue but as you say that is very hard to test without access to that particular environment.