Ember shows me the following error: Uncaught Error: No route matched the URL '/users'
Sks.IndexRoute = Ember.Route.extend
redirect: ->
this.transitionTo 'users'
Sks.Router.map ->
this.resource 'users', path: 'users/:user_id'
Sks.UsersRoute = Ember.Route.extend
setupController: (controller, model) ->
this.controllerFor('users').set 'content', Sks.User.find()
this.controllerFor('currentUser').set 'content', Sks.CurrentUser.find 1
this.controllerFor('top').set 'content', Sks.Top.find()
this.controllerFor('hamsters').set 'content', Sks.Hamster.find()
Everything works when I remove the dynamic segment.
Version: v1.0.0-rc.1-78-gd4e6a5c
edit#1
added IndexRoute
In Ember, collections and items actually use separate routes. Here's how I do it:
App.Router.map(function () {
this.resource('contacts', { path: '/contacts' });
this.resource('contact', { path: '/contact/:contact_id' });
});
App.IndexRoute = Ember.Route.extend({
redirect: function () {
this.replaceWith('contacts');
}
});
App.ContactsRoute = Ember.Route.extend({
model: function (params) {
return App.Contact.find();
}
});
App.ContactRoute = Ember.Route.extend({
model: function (params) {
return App.Contact.find(params.contact_id);
}
});
Here's a working jsFiddle.
It seems that I should have RTM :)
Sks.Router.map ->
this.resource 'users', ->
this.resource 'user', path: ':user_id'
Related
I am trying to build a masonry view of the top selling Items in a hypothetical eCommerce Site but Masonry is being rendered before the Data Models can be generated over RESTAdapter. Here are is my Ember.js code:
App.Userprofile = DS.Model.extend({
loggedIn: DS.attr('boolean'),
name: DS.attr('string'),
totalItems: DS.attr('number'),
});
App.ApplicationRoute = Ember.Route.extend({
setupController: function(controller) {
this.store.find('userprofile', 'bat#man.com').then (function(userprofile) {
controller.set ('model', userprofile);
});
}
});
App.ApplicationAdapter = DS.DjangoRESTAdapter.extend({
host: HOST,
namespace: 'api'
});
App.ApplicationView = Ember.View.extend({
elementId: '',
classNames: ['container','fullwidth'],
templateName: 'application'
});
App.Cloud = DS.Model.extend({
item: DS.attr('string'),
numberItems: DS.attr('number'),
rank: DS.attr('number')
});
App.CloudAdapter = DS.DjangoRESTAdapter.extend({
host: HOST,
namespace: 'api',
});
App.CloudController = Ember.ObjectController.extend({
needs: ['application'],
cloudSize: function() { // Determines the size of the div
var cloudsize = Math.round (this.get('model.numberItems') * 5 / this.get('controllers.application.totalItems')) + 1;
var divName = "score" + cloudsize.toString();
return divName;
}.property('model.numberItems', 'controllers.application.totalitems')
});
App.ItemcloudRoute = Ember.Route.extend({
setupController: function(controller) {
this.store.findAll('cloud').then (function(itemcloud) {
controller.set ('model', itemcloud);
});
}
});
App.ItemcloudController = Ember.ArrayController.extend({
needs: ['cloud', 'application'],
sortProperties: ['rank'],
});
App.ItemcloudView = Ember.View.extend({
elementId: 'magicgrid',
classNames: ['cloudcontainer'],
templateName: 'itemcloud',
didInsertElement: (function() {
this._super();
Ember.run.scheduleOnce('afterRender', this, this.applyMasonry);
}).observes('controller.itemcloud'),
applyMasonry: function() {
setTimeout( function() { // settimeout to ensure masonry is called after data models are generate
console.log ("applyMasonry being called");
$('#magicgrid').masonry({
itemSelector: '.company',
isAnimated: true
});
}, 2000);
}
});
Here is the portion of the template file where itemcloud is generated.
<script type="text/x-handlebars" data-template-name='itemcloud'>
{{#each controller.model itemController="cloud"}}
<div {{bind-attr class=":company cloudSize"}}>
<div class="companylogo">
<img src="images/logos/color-logos/logo-01.jpg" />
</div>
<div class="count">{{numberItems}}</div>
</div>
{{/each}}
<div class="clearfix"></div>
</script>
Now, I am struggling to find a way to hold the Masonry rendering until after the data is fetched due to the asynchronous nature of the data fetching and the template rendering. My research says that using a View for the CloudController Objects would be useful, but am trying to figure out if there is something I am missing in my current design. Also, if someone can provide pointers to use Views correctly here for the CloudController Objects
Let me know if I need to provide any more clarifications. Thanks!
if you doing it in the setupController Ember assumes the model is already ready and continues rendering the page despite the response not coming back from the server.
The easiest way to do it is to return your model/promise in the model hook. Ember will wait on rendering the page until the model has been resolved.
App.ItemcloudRoute = Ember.Route.extend({
model: function(){
this.store.find('cloud');
}
});
The code above will do the same thing your code was doing, except Ember will wait for the find to resolve before creating and setting the model on the controller.
As per kingpin2k comments updating the answer to reflect the working code:
App.ApplicationRoute = Ember.Route.extend({
model: function() {
return this.store.find ('userprofile', 'bat#man.com');
},
setupController: function(controller, model) {
controller.set ('model', model);
}
});
I have a simple app on fiddle http://jsfiddle.net/kitsunde/qzj2n/2/
<script type="text/x-handlebars">
{{outlet}}
</script>
<script type="text/x-handlebars" id="profile">
Profile Page
{{ email }}
</script>
Where I'm trying to display a profile page.
window.App = Ember.Application.create();
App.Router.map(function () {
this.resource('profile', {path: '/'});
});
App.User = DS.Model.extend({
email: DS.attr('string')
});
App.User.FIXTURES = [
{
id: 1,
email: 'herpyderp#gmail.com'
}
];
App.ProfileRoute = Ember.Route.extend({
model: function(){
return App.User.find().get('firstObject');
}
});
But I'm getting an exception:
Error while loading route: TypeError: undefined is not a function
What am I missing?
There are a few things missing. You can find the fixed fiddle here:
http://jsfiddle.net/47cHy/
window.App = Ember.Application.create();
App.ApplicationAdapter = DS.FixtureAdapter;
App.Router.map(function () {
this.resource('profile', { path: '/' });
});
App.User = DS.Model.extend({
email: DS.attr('string')
});
App.User.FIXTURES = [
{
id: 1,
email: 'herpyderp#gmail.com'
}
];
App.ProfileRoute = Ember.Route.extend({
model: function() {
return this.store.find('user').then(function(users) {
return users.get('firstObject');
});
}
});
Your template had the id index and not the name of the route profile
You have to tell Ember specifically to use the fixture adapter.
You accessed the model directly via the global object. You should let Ember do the work via the internal resolver and use this.store.find.
.find() returns a promise. You should get the first object in the then handler and return it there.
I am currently having issues preselecting items in the multiselect view. I'm using ember 1.3 with ember-data 1.0.0 beta 6 and ember-data-django-rest-adapter.
App.Article = DS.Model.extend({
title: attr(),
description: attr(),
authors: hasMany('author')
});
App.ArticleRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('article', params.article_id);
},
setupController: function(controller, model) {
controller.set('content', model);
}
});
App.ArticleController = Ember.ObjectController.extend({
needs: ['authors'],
allAuthors: function() {
return this.store.find('author');
}.property()
});
Template:
{{input authors as='select'
multiple='true'
collection='allAuthors'
selection='authors'
optionValuePath='content.id'
optionLabelPath='content.name'}}
I'm not sure why this is not working because when I output allAuthors and authors using #each in the template, I'm getting the data that I should.
Is there something I'm missing to do?
Thanks in advance for the help.
I usually prepopulate this kind of data in the route using a promise:
App.ArticleRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('article', params.article_id);
},
setupController: function(controller, model) {
this.store.find('author').then(function(authors) {
controller.set('allAuthors', authors);
// or maybe controller.get('allAuthors').addObjects(authors);
});
controller.set('content', model);
}
});
App.ArticleController = Ember.ObjectController.extend({
needs: ['authors'],
allAuthors: []
});
Not sure if this is the best way to do this, but it's what worked for me.
In my app, there are Templates and Documents. I want to be able to create a document from a template, i.e. the user will be able to go to the template show page, click a button, and be redirected to the new document page, with document text pre-filled from the template (I only need to have the text pre-filled, I don't care about the document knowing the template it's made from).
But how would I pass the text to the new document page?
I ended up doing the following:
App.Router.map ->
#resource 'documents', ->
#route 'new'
#route 'new_from_template', path: '/new/:template_id'
App.DocumentsNewFromTemplateRoute = Ember.Route.extend
model: (params) ->
model = App.Document.createRecord()
if params.template_id
App.Template.find(params.template_id).then (template) ->
model.set 'text', template.get('text')
model
setupController: (controller, model) ->
if model._reference.type == App.Template
model = #model(template_id: model.id)
#currentModel = model
#controllerFor('documentsNew').set 'model', model
renderTemplate: ->
#render 'documents/new'
And to link to new document form for template, I simply do
{{#linkTo 'documents.new_from_template' template}}Create a document{{/linkTo}}
You can define an action in the controller:
App.TemplateRoute = Em.Route.extend({
model: function() {
return Em.Object.create({
name: "A Template",
values: {title: "Templated Title"}
});
}
});
App.TemplateController = Em.ObjectController.extend({
goToNewDocument: function() {
var o = Em.Object.create(this.get('values'));
o.set('source', 'Template');
App.Router.router.transitionTo('newdoc', o);
}
});
App.NewdocRoute = Em.Route.extend({
model: function() {
return Em.Object.create({title: "Default Title", source: "Model hook"});
}
});
jsbin demo
I'm trying to follow the example in the Ember guide but with ember-data. Here is my router:
App.Router = Ember.Router.extend({
enableLogging: true,
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/',
redirectsTo: 'orders'
}),
orders: Ember.Route.extend({
route: '/orders',
connectOutlets: function(router) {
router.get('applicationController').connectOutlet('orders', App.store.findAll(App.Order));
}
}),
order: Ember.Route.extend({
route: '/orders/:ord_id'
})
})
});
And in my template:
{{#each order in controller}}
...
{{/each}}
I get this error: TypeError: 'undefined' is not an object (evaluating 'c.split')
It works using an ArrayController. I changed this:
App.OrdersController = Ember.Controller.extend();
to this:
App.OrdersController = Ember.Controller.extend();