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.
Related
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
I have a requirement to make what is essentially a dynamic form (wizard) that has multiple steps. Now I want to be able to quickly add new steps to the wizard in the future (or remove them) so I don;t to create separate routes for each step like so:
this.resource('wizard', { path: '/' }, function() {
this.route('step1', { path: '/' });
this.route('step2');
this.route('step3');
this.route('step4');
this.route('step5');
});
I would much prefer to have a dynamic segment that takes in the name of the step and loads the corresponding template of the same name, like so
this.resource('wizard', { path: '/' }, function() {
this.route('step', { path: '/:step' });
});
Is this at all possible or is this just wishful thinking.
I have come up with a solution but I am not sure it is considered the best...
I have defined a route in the router to take in a dynamic segment with the name of the template:
this.resource('wizard', { path: '/wizard' }, function() {
this.route('missing', { path: '/:step' });
});
I have then created a missing route that takes this dynamic segment from the model and uses it to load in the template into the appropriate outlet
export default Ember.Route.extend({
renderTemplate: function(controller, model) {
this.render('wizard/' + model.step, {
controller: controller
});
}
});
I would love to hear some thoughts on this solution.
The following route setup is from the Ember.JS docs (http://emberjs.com/guides/routing/defining-your-routes/) and I have to deal with an equivalent problem:
App.Router.map(function() {
this.resource('post', { path: '/post/:post_id' }, function() {
this.route('edit');
this.resource('comments', function() {
this.route('new');
});
});
});
According to the docs and my own experience this results, among others, in the following route:
/post/:post_id/comments -> App.CommentsIndexRoute
However, since I want a post-specific comment route I would have expected
/post/:post_id/comments -> App.PostsCommentsRoute
What exactly is my fallacy and what would I have to change to achieve my goal.
Only route's share their name with their parent resource. If you wanted it to show up as as PostsCommentsRoute it would be more like this (note I pluralized it to match your example, despite the url not being pluralized)
App.Router.map(function() {
this.resource('posts', { path: '/post/:post_id' }, function() {
this.route('comments');
});
});
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" })
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.