EmberJs routing - ember.js

I am trying to create EmberJs / RequireJs application and ran into a problem. According to examples, I defined my app.js like this:
(function () {
define(['../app/routing'], function (routing) {
return {
Router: routing,
LOG_TRANSITIONS: true
};
});
}());
, routing.js as:
(function (root) {
define(["ember"], function (Ember) {
var router = Ember.Router.extend({
todosRoute: Ember.Route.extend({
viewName: 'todos',
model: function(){
return this.todos.find('todos');
}
})
});
return router;
});
}(this));
and main.js:
require(['app', 'ember'], function(app, Ember){
var app_name = config.app_name || "app";
root[app_name] = app = Ember.Application.create(app);
The problem I have is that no matter how I define my routes, I cannot get them to work, emberJs also reports, that such routes do not exist.
How can I define routes and pass them to Application.create(obj) as argument object? If possible, I would still like to keep them in separate file.
Please note, that routing.js should be executed before main.js, therefore App object is not available like it is suggested in tutorials

js/app.js
App = Ember.Application.create();
App.Router.map(function() {
this.route('index', {
path: '/'
});
this.route('about');
});
App.IndexRoute = Ember.Route.extend({
//
});
I know you'll want to pull these all out into different files, but have you been able to make things work in a simple environment?
As far as the Require JS stuff... I don't know much about that - but there seems to be a thread here: Ember.js and RequireJS that gets to the bottom of it.

Make your router.js file look like this:
(function (W) {
'use strict';
define([
'ember'
], function (Ember) {
var Router;
Router = Ember.Router.extend();
Router.map(function () {
var _this = this;
_this.route('index', {path: '/'});
_this.route('todos', {path : '/todos/'});
});
return Router;
});
})(window);
For individual route, add a new file.
(function (W) {
'use strict';
define([
'ember',
'models/todosModel'
], function (Ember, TodosModel) {
var TodosRoute;
TodosRoute = Ember.Route.extend({
model: function () {
return TodosModel;
}
});
return TodosRoute;
});
})(window);
Add the individual routes to object returned by your app.js.

Related

How to get the Router instance in initializer

I have a use-case where I want to register routes dynamically in an initializer.
Because the application is a self-defining app I don't know the routes at development time.
Currently I created an instance-initializer:
import Ember from 'ember';
const myTempRouteList = ['home']; // this is retrieved from the backend
export function initialize(instance) {
let container = instance.container;
let router = container.lookup('router:main');
myTempRouteList.forEach(function (name) {
let routeName = name.dasherize();
router.map(function(){ // router.map is undefined here
this.resource(routeName, {path: routeName});
});
container.register(`route:${routeName}`, Ember.Route.extend({
}));
}, this);
}
export default {
name: 'register-routes',
initialize: initialize
};
The problem is that the router instance is present but is has no method map. In the documentation it is described as a public method. Some other methods I checked are present, f.i. hasRoute.
It turns out I had to call the lookupFactory method instead of the lookup method on the container.
export function initialize(instance) {
let container = instance.container;
let router = container.lookupFactory('router:main');
...
}
For people who are working on latest ember with ember-cli (Ember > 2.0). This might be helpful
//initializer.js
export function initialize(application) {
var routeNames = [];
var router = application.__container__.lookupFactory('router:main');
application.deferReadiness();
//if you want to have your custom routes on the highest level
if (routeNames.length > 0) {
router.map(function() {
var _this = this;
routeNames.forEach(function(item,index) {
_this.route(item);
});
});
}
//if you want to have your custom routes as a child of another parent route
if (routeNames.length > 0) {
router.map(function() {
this.route('parentRoute', {path:'/'}, function(){
var _this = this;
routeNames.forEach(function(item,index) {
_this.route(item);
});
});
});
}
application.advanceReadiness();
}

How to define a nested route to render when hitting the parent in Ember

I have a blog route, and a blog-post route.
Router:
App.Router.map(function () {
this.resource('blog', function () {
this.route('post', {path: ':id/:title'});
});
});
Routes:
App.BlogRoute = Ember.Route.extend({
model: function () {
return this.store.find('BlogPost');
}
});
App.BlogPostRoute = Ember.Route.extend({
model: function (params) {
return this.store.findById('BlogPost', params.id);
},
serialize: function (model, params) {
return {
id: model.get('id'),
title: Ember.String.dasherize(model.get('title'))
}
}
});
In my Handlebars template for the parent blog route I have an {{outlet}} that works fine when I click one of the {{#link-to}}s.
What I want to do is render by default the most recent (highest ID) blog post when a user goes to the /blog route.
I found this question and tried this as a result, to no avail:
App.BlogIndexRoute = Ember.Route.extend({
redirect: function () {
var latest = 3;
this.transitionTo('blog.post', {id: latest});
}
});
(latest is just a placeholder for this.model.pop() or whatever it needs to be.)
I just can't figure out how exactly to load the sub route with the data from the model.
You can fetch the model for any resource/route that has already been fetched (aka parent resources) using modelFor
App.BlogIndexRoute = Ember.Route.extend({
redirect: function () {
var blogs = this.modelFor('blog');
if(blogs.get('length')){
this.transitionTo('blog.post', blogs.get('firstObject')); // or blogs.findBy('id', 123)
}
}
});

EmberJS dynamic routing and configuration

I use EmberJS v1.0.0-rc.2 and requireJS.
My app structure is kinda like that.
- app
- - moduleA
My main file:
#app/main.js
var App = Ember.Application.create({
VERSION: '1.0',
//Log router transitions:
LOG_TRANSITIONS: true
});
App.Router.map(function() {
AppRouting.call(this);
});
App = AppRoutingExtend(App);
App.initialize();
Functions AppRouting() and AppRoutingExtend() could be find in the fellow file:
#app/routing.js
function AppRouting() {
this.resource('root', {path: '/'}, function() {
this.resource('moduleA', {path: '/'}, function() {
ModuleARouting.call(this);
});
});
}
function AppRoutingExtend(App) {
var ModuleARouting = ModuleARoutingExtend();
//Check if ModuleARouting is not empty
if (!Ember.isEmpty(ModuleARouting)) {
$.each(ModuleARouting, function(key, value) {
//Check if key is a string of only letters
// And if value is like Ember.Route.extend({})
if (typeof key === 'string' && /^[a-zA-Z]+$/.test(key)
&& value.toString() == '(subclass of Ember.Route)') {
eval("App.Root" + "ModuleA" + key + "Route = value");
} else {
//Throw error
}
});
}
return App;
}
Functions ModuleARouting() & ModuleARoutingExtend() could be find in the follow file:
#app/moduleA/routing.js
function ModuleARouting() {
this.route("contributors", {path: "/"});
this.resource('aContributor', {path: "/:githubUserName"}, function() {
this.route("details", {path: "/"});
this.route("repos", {path: "/repos"});
});
}
function ModuleARoutingExtend() {
var routes = {};
routes['Contributors'] = Ember.Route.extend({
/*
Some Code
*/
});
routes['AContributor'] = Ember.Route.extend({
/*
Some Code
*/
});
routes['AContributorDetails'] = Ember.Route.extend({
/*
Some Code
*/
});
routes['AContributorRepos'] = Ember.Route.extend({
/*
Some Code
*/
});
return routes;
}
I created AppRouting() and ModuleARouting() to be able to add dynamically some routing path to my application, by adding a new module or remove one. By this way, each module could have its intern structure and AppRouting() just merge them.
However, I'm not sure about ModuleARoutingExtend() and more specifically AppRoutingExtend(). In the last one, I try to modify routes like App.RootModuleAContributorsRoute. By the way I don't have information directly which routes have been created by the ModuleARouting.call(this), I cannot know the name of the variable RootModuleAContributorsRoute. This is the reason I use eval to be dynamic by getting the 'Contributors' from ModuleARoutingExtend() and its value, Ember.Route.extend({/* some code *});
So, my question is: Is there a better way to add dynamically some routes for my application and to get their configuration? And if not, is it still a good way?

Same Ember.JS template for display/edit and creation

I am writing a CRUD application using Ember.JS:
A list of “actions” is displayed;
The user can click on one action to display it, or click on a button to create a new action.
I would like to use the same template for displaying/editing an existing model object and creating a new one.
Here is the router code I use.
App = Ember.Application.create();
App.Router.map(function() {
this.resource('actions', {path: "/actions"}, function() {
this.resource('action', {path: '/:action_id'});
this.route('new', {path: "/new"});
});
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('actions');
}
});
App.ActionsIndexRoute = Ember.Route.extend({
model: function () {
return App.Action.find();
}
});
App.ActionRoute = Ember.Route.extend({
events: {
submitSave: function () {
this.get("store").commit();
}
}
});
App.ActionsNewRoute = Ember.Route.extend({
renderTemplate: function () {
this.render('action');
},
model: function() {
var action = this.get('store').createRecord(App.Action);
return action;
},
events: {
submitSave: function () {
this.get("store").commit();
}
}
});
The problem is that when I first display an action, and then come back to create a new one, it looks like the template is not using the newly created record, but use instead the one displayed previously.
My interpretation is that the controller and the template are not in sync.
How would you do that?
Maybe there is a simpler way to achieve this?
Here is a JSBin with the code: http://jsbin.com/owiwak/10/edit
By saying this.render('action'), you are not just telling it to use the action template, but also the ActionController, when in fact you want the action template, but with the ActionNewController.
You need to override that:
this.render('action', {
controller: 'actions.new'
});
Updated JS Bin.

Ember namespaces creating reusable apps

Hi I am new in ember I tried to solve my self but no success.
Take a look at code:
// works
window.App = Em.Application.create();
window.Core = Em.Namespace.create({ Beta: Em.Namespace.create() });
App.Router.map(function() {
this.route("registration", {
path: "/beta/registration"
}); // also Core.Beta.registration tried
});
App.IndexRoute = Em.Route.extend({
redirect: function() {
this.transitionTo('registration'); // also Core.Beta.registration tried
}
});
// never is called
Core.Beta.RegistrationController = Em.Controller.extend();
Core.Beta.RegistrationView = Em.View.extend({ template: Em.TEMPLATES['beta.regisration'] });
Core.Beta.RegistrationRoute = Em.Route.create({
setupController: function() {
console.log(arguments);
},
setupView: function() {
console.log(arguments);
}
});
All inside Core.Beta never is called as should in ember pre4... Using Core.Beta I can generate reusable micro apps to use in other projects. Do you know the way how ember inject that app in router so it could create instances inside the namespaces.
You need to create your namespace within the App itself
window.App = Em.Application.create();
window.App.Core = Em.Namespace.create({ Beta: Em.Namespace.create() });