Ember explicit route - javascript

When I define a route explicitly, Ember fails to render the associated template. Do I have to specify in the route object the renderTemplate property every time I create an explicit route? Just to be more clear, here is my example:
define(['ember'],
function(Ember) {
"use strict";
var DudeRoute = Ember.Route.extend({
model: function() {
},
setupController: function() {
},
renderTemplate: function() {
}
});
return DudeRoute;
});
and if I specify in my app like this:
define([ ... ],
function(
Router,
IndexRoute,
DudeRoute,
ApplicationController,
IndexController
) {
"use strict";
/*Module Pattern*/
var App = {
LOG_TRANSITIONS: true,
Router: Router,
// Load routes
IndexRoute: IndexRoute,
DudeRoute: DudeRoute,
//Load Controllers
ApplicationController: ApplicationController,
IndexController: IndexController
//Load Models
//Load Views
};
return App;
});
The whole thing falls apart, it does not render my template. Though if I remove DudeRoute everything works fine.

OK, I figured it out. So My problem was, that I was using some automation to generate code for Route/Controller/View/templates. And what I did and you can see from the code too is that I stupidly set the renderTemplate method to do nothing. So by removing it it will work.

Related

appRouter is not fired on load

I'm trying to set up a router for my backbone application. However when i go to localhost:8888/extractors or localhost:8888/extractors/new. neither of the console messages are being outputted. How come when it is defined in the router itself?
require(['new-extractor-view', 'extractors-collection', 'backbone'], function (NewExtractorView, ExtractorsCollection) {
'use strict';
var extractorCollection = new ExtractorsCollection();
new NewExtractorView({
collection: extractorCollection
});
//
// Initialize URL router
//
var AppRouter = Backbone.Router.extend({
routes: {
'extractors': 'extractorsRoute',
'extractors/new': 'newExtractorRoute',
'*actions': 'defaultRoute'
}
});
var appRouter = new AppRouter;
appRouter.on('route:extractorsRoute', function () {
console.log('test1')
});
appRouter.on('route:newExtractorRoute', function () {
console.log('test2')
});
Backbone.history.start();
});
If you want to use url's without # you should initialize history like:
Backbone.history.start({ pushState: true })
Read more about the pushState option.
The code looks ok to me, but I think you forgot the brackets when creating the new router:
var appRouter = new AppRouter();
Edit: Oh and I'm quite sure Backbone will only match localhost:8888/#extractors (with a leading hashtag) but not localhost:8888/extractors as described here.

How do I supply an index route with a template Ember 2?

I want to create an ember application as follows:
var app = Ember.Application.create({
rootElement: document.getElementById('root'),
name: 'my-application',
IndexRoute: Ember.Route.extend({
model: function() {
console.log('model');
},
afterModel: function(model, transition) {
},
template: Ember.Handlebars.compile('<div id="test"></div>'),
}),
locationType: 'hash',
});
The problem is that I dont get the test div in the DOM. How come?
http://jsbin.com/koyihapuze/edit?html,js,console,output
1) in your code this.namespace.TEMPLATES is undefined ( inside resolver ) so you
Fix code like
resolveTemplate: function(parsedName) {
var templatePath = parsedName.fullNameWithoutType.replace('.', '/');
var template = this.namespace.TEMPLATES && this.namespace.TEMPLATES[templatePath];
if (!template) {
template = this._super(parsedName);
}
return template;
},
After you'll find new div.ember-view element inside application container
2) template is not property of route ( as in your code ), you can define ApplicationView with template or templateName in router and solve resolver errors
P.S. It's better to start with Ember using ember-cli

marionette router does not work. Cannot navigate to a route from address bar

I have a backbone marionette application with requirejs for loading module. Everything else is working just fine as expected. Until I put router in it. The router and controller binding does not seem to work. When I go to a route from address bar: in this case homedomain#edit/id, the router is rerouted to home page. I am taking reference of Marionette a Gentle Introduction By David Sulc for most of my code.
'use strict';
define([
'app',
'email_templates',
'email_list_controller'
], function(App) {
App.module('Email', function(Email, App, Backbone, Marionette) {
Email.Router = Marionette.AppRouter.extend({
appRoutes: {
'edit/:id' : 'editEmails',
'': 'listEmails'
}
});
var API = {
listEmails: function() {
require(['email_list_controller'], function(controller) {
App.navigate('/');
controller.list();
});
},
editEmails: function(item){
alert(item); //initial debugging point. this line is referenced in description below.
require(['email_edit_controller'], function(controller){
var id = typeof item === "string" ? item : item.id;
App.navigate('edit/'+id);
controller.editor(item);
});
}
};
Email.on('start', function() {
new Email.Router({
controller: API,
});
});
});
return App.Email;
});
From my understanding so far when I navigate to a route: #edit/<someRandomId> the <someRandomId> should be alerted on the screen. The exact line has been referenced. This is just my approach to see if the router is working. But in fact the whole Email.Router is not working.

Ember.js Won't Accept Root URL

I am trying to create an Ember.js app on a domain that has a ton of different sublevel sites. I'm trying to set my rootURL to '/org/new/' like the docs say so that the root URL will be mydomain.com/org/new/. I'm using the following router code:
App.Router.reopen({
rootURL: '/org/new/'
});
App.Router.map(function() {
this.resource('carouselItems', { path: '/' }, function() {
// child routes
});
});
App.CarouselItemsRoute = Ember.Route.extend({
model: function() {
return this.store.find('carouselItem');
}
});
However, my app keeps trying to load mydomain.com/carouselItems instead. I have a CarouselItemsController that extends ArrayController and a CarouselItemController that extends ObjectController. Both are used when the user navigates to mydomain.com/org/new/ to generate some items in a Bootstrap carousel.

Ember.js Error in specifying URL type of location='history' in App.Route

I have started learning the ember.js framework and I am stuck at how to use the setting of the URL type feature that the framework has.
http://emberjs.com/guides/routing/specifying-the-location-api/
I have this simple application.js
App = Ember.Application.create();
App.Router.reopen({
location: 'history'
});
App.Router.map(function () {
this.route('about');
});
App.ApplicationRoute = Ember.Route.extend({
model: function () {
return appdata;
}
});
App.IndexRoute = Ember.Route.extend({
setupController: function (controller) {
// Set the IndexController's `title`
controller.set('indextitle', "My Index title");
},
renderTemplate: function () {
this.render({ outlet: 'indexoutlet' });
}
});
App.AboutRoute = Ember.Route.extend({
model: function () {
return appdata;
},
renderTemplate: function () {
this.render({ outlet: 'aboutoutlet' });
}
});
var appdata = { mytext: '', theplaceholder: 'Enter new text', attr:'Yeap!' }
If I don't use the
App.Router.reopen({
location: 'history'
});
the application works fine and it goes to the 'about' route by appending the URL the '~/EmberjsTest.aspx#/about' as it supposed to do.
However because I do not like the hash symbol in the URL of the page, I would prefer if it was removed and to do that the guide says we should put this code:
App.Router.reopen({
location: 'history'
});
But when I do it I get an error in the Chrome console saying:
'Assertion failed: The URL '/EmberjsTest.aspx' did match any routes in your application'
What am I doing wrong?
Thanks in advance
If you want to use the history API then you have two options.
Serve your Ember app from '/' so that Ember can just work with it's "normal" index/root route.
Create a route in your Ember app that can handle '/EmberjsTest.aspx'.
this.route("index", { path: "/EmberjsTest.aspx" });
Note that if you go with option 2 you'll probably have to update all of your routes to include '/EmberjsTest.aspx' in their paths.
this.resource("posts", {path: "/EmberjsTest.aspx/posts" })

Categories