We Keep Coding

Ember error while creating dynamic routes

Apologies if this has already been asked and I couldn't figure that out.
I am attempting to link an Ember dynamic Route with a Template. It's not working. The error for the below code is Error while processing route: favorite undefined is not a function
The idea is that the main page should show a list of favorites that are returned via Ajax. Each favorite should have a link. The user clicks a link and the favorite is injected into the relevant template on the same page.
The main page is working correctly. With the code below, the links are currently showing index.html/#/12345ab where 12345ab is the product_id.
HTML Template:
<script type="text/x-handlebars" id="favorites">
{{#each favorite in arrangedContent}}
<div class="productBox">
{{#link-to 'favorite' favorite.product_id}}
<img {{bind-attr src=favorite.product_image}} />
{{/link-to}}
</div>
{{/each}}
{{outlet}}
</script>
<script type="text/x-handlebars" id="favorite">
<h2>{{product_name}}</h2>
<img {{bind-attr src=product_image}} />
</script>
Router code:
App.Router.map(function() {
this.resource('favorites', { path: '/'});
this.resource('favorite', { path: ':product_id' });
});
App.FavoritesRoute = Ember.Route.extend({
model: function() {
return Ember.$.ajax({
//this returns correctly
}).then(function(data) {
return data.favorites;
});
}
});
App.FavoriteRoute = Ember.Route.extend({
model: function(params) {
return App.Favorites.findBy('product_id', params.product_id);
}
});
Update:
The answer below gives the following code, but if the user goes directly to the page via the URL or a straight refresh, it fails due to the fact that the favorites model is not resolved yet. Exact error is: Cannot read property 'findBy' of undefined
App.FavoriteRoute = Ember.Route.extend({
model: function(params) {
return this.modelFor('favorites').findBy('product_id', params.product_id);
}
});
Update 2:
Entire Router code:
App.Router.map(function() {
this.resource('favorites', { path: '/'});
this.resource('favorite', { path: ':product_id' });
});
App.ApplicationRoute = Ember.Route.extend({
model: function() {
return new Promise(function(resolve, reject) {
Ember.$.ajax({
url: 'MY_URL',
dataType: 'jsonp',
jsonp: 'callback'
}).then(function(data) {
resolve(data.favorites);
});
});
},
setupController: function(controller, model) {
return this.controllerFor('favorites').set('model', model);
}
});
App.FavoriteRoute = Ember.Route.extend({
model: function(
return this.controllerFor('favorites').get('model').findBy('product_id', params.product_id);
}
});

By the looks of it, you want to find the model from the parent route. You can do it likes so:
App.FavoriteRoute = Ember.Route.extend({
model: function(params) {
this.modelFor('favorites').arrangedContent.findBy('product_id', params.product_id);
}
});
UPDATE:
The problem is that your promise from the parent route isn't getting resolved correctly. You're returning a promise but the result of that promise isn't getting resolved i.e. (return data.favorites) is not resolving the promise.
Update it to:
App.FavoritesRoute = Ember.Route.extend({
model: function() {
return new Promise(function(resolve, reject) {
Ember.$.ajax('yourURL').then(
function(data){
resolve(data.favorites);
});
});
}
});
Also incorporate the initial feedback from this answer. I have a working JSBin going against an actual endpoint to show it works: http://jsbin.com/boloya/3/edit
P.S. Look out for params.product_id, that comes in as a string. You made need to cast it to the required type in order for the findBy to work correctly.
P.S.S. I should also add, Ember.$.ajax returns a promise, but you want the model to be data.favorites which is the need for the outer promise. If you just returned Ember.$.ajax and accessed everything via model.favorites you wouldn't need it.

Your routes need to be nested for a child resource to have access to a parent via #modelFor. However, if your UI isn't nested, your routes probably shouldn't be, since nesting routes also wires up a corresponding view hierarchy.
You could always define the model for the favorite route in terms of a subset of the data returned by your ajax call:
//routes/favorite.js
model: function() {
return Ember.$.getJSON('/favorites').then(function(favorites) {
return favorites.findBy('id', params.product_id');
});
}
but then, the top-level .getJSON('/favorites)call would be made multiple times, every time the user enters/favorites, and every time he enters/favorites/:id`.
Instead, you can have the application set up the FavoritesController once upon entry. That way you can share data, but favorite doesn't have to be a child route of favorites. It might look something this:
//routes/application.js
model: function() {
return Ember.$.getJSON('/favorites');
},
setupController: function(controller, model) {
this.controllerFor('favorites').set('model', model);
}
and
//routes/favorite.js
model: function(params) {
return this.controllerFor('favorites').find('id', params.id);
}
That way, the JSON is only loaded once, ApplicationRouter is wiring up your FavoritesController for you, and the data is shared with the favorite resource.

With some help from the Ember IRC channel, this is the working code. In essence, it creates an Index template for both the favorites and the favorite template to render into. Then the favorite route can access it's parent route favorites and yet still render into the same template area.
HTML
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" id="favorites">
{{outlet}}
</script>
<script type="text/x-handlebars" id="favorites/index">
{{#each favorite in arrangedContent}}
<div class="productBox">
{{#link-to 'favorite' favorite.product_id}}
<img {{bind-attr src=favorite.product_image}} />
{{/link-to}}
</div>
{{/each}}
{{outlet}}
</script>
<script type="text/x-handlebars" id="favorite">
<h2>{{product_name}}</h2>
<img {{bind-attr src=product_image}} />
</script>
Router.js
App.Router.map(function() {
this.resource('favorites', { path: '/'}, function () {
this.resource('favorite', { path: ':product_id' });
});
});
App.IndexRoute = Ember.Route.extend({
redirect: function () {
this.replace('favorites');
}
});
App.FavoritesRoute = Ember.Route.extend({
model: function() {
return new Promise(function(resolve) {
Ember.$.ajax({
url: 'MY_URL',
dataType: 'jsonp',
jsonp: 'callback'
}).then(function(data) {
resolve(data.favorites);
});
});
}
});
App.FavoriteRoute = Ember.Route.extend({
model: function (params) {
return this.modelFor('favorites').findBy('product_id', params.product_id);
}
});

Make a controllers model available to the ApplicationController before it's loaded in Ember

I am trying get access to a controller needed by my ApplicationController (Application needs Practice), however the PracticeController is only available after the resource has been loaded through it's respective route-url visit.
How, can I make sure the PracticeController and it's content/model is available at all times?
To be specific, I need my flashcardArray to be available throughout my application and at all times, even when the Practice-route hasn't been visited, thus loaded yet.
Thanks for any help!
Here is my code:
App.Router.map(function() {
this.resource('signup');
this.resource('login');
this.resource('profile');
this.resource('practice');
this.resource('overview');
});
App.ApplicationRoute = Ember.Route.extend({
model: function () {
return this.store.find('user');
}
});
App.LoginRoute = Ember.Route.extend({
controllerName: 'application',
model: function () {}
});
App.PracticeRoute = Ember.Route.extend({
model: function () {
return this.store.find('flashcards');
}
});
//ApplicationController
App.ApplicationController = Ember.ObjectController.extend({
needs: ['practice'],
flashcardArray: Ember.computed.alias('controllers.practice.flashcardArray'),
currentUser: Ember.computed.alias('model'),
isLoggedIn: false
}
});
//PracticeController
App.PracticeController = Ember.ObjectController.extend({
needs: ['application'],
flashcardArray: Ember.computed.alias('model'),
currentUser: Ember.computed.alias('controllers.application.currentUser')
}
});
// Practice template feeded into an outlet of the application template
<script type="text/x-handlebars" id="practice">
<div class="content-padded">
{{#each object in flashcardArray}}
<div class="card_wrapper">
<p><h1>{{{object.num_reference}}}</h1><p>
<p>PinYin: {{{object.mandarin}}}</p>
<p>def: {{object.definition}}</p>
{{/each}}
</div>
</script>

I think if you have data you need throughout the application, regardless of the user's active route, you probably need to return it as the ApplicationRoute:
App.ApplicationRoute = Ember.Route.extend({
model: function () {
return {
user: this.store.find('user'),
flashcards: this.store.find('flashcards')
};
}
});

Ember RSVP Hash not updating controller content

I am trying to have handle multiple controllers at one route in Ember. This response seems like the way to go, but am having difficult getting this to work. Here is a simple example that fails to work:
App.IndexRoute = Ember.Route.extend({
model: function() {
myData = [1,2,3];
return Em.RSVP.hash({
docs1: myData,
docs2: myData
});
},
setupController: function(controller, model) {
controller.set('model', model.docs1);
this.controllerFor('documents').set('model', model.docs2);
}
});
App.DocumentsController = Ember.ArrayController.extend({
count: function() {
return this.get('length');
}.property('#each'),
});
App.IndexController = Em.ArrayController.extend({
count: function() {
return this.get('length');
}.property('#each'),
});
And a JSBin showing the results:
http://jsbin.com/wavigada/1/edit
You can see that the IndexController reports the correct count of 3, but the DocumentsController doesn't get set.
Can anyone help me out?

You will need to include the documents controller whose content you populate in setupController in your IndexController via needs:
App.IndexController = Em.ArrayController.extend({
needs: ['documents'],
count: function() {
return this.get('length');
}.property('#each'),
});
Then you need to change your template to:
<script type="text/x-handlebars" data-template-name="index">
{{count}}
{{render 'documents' controllers.documents}}
</script>
Note that just putting {{render 'documents' controllers.documents}} (as you did in your question) refers to a documents property of your current model, which doesn't exists.
See: http://jsbin.com/wavigada/6/

EmberJS Uncaught TypeError: Object [object Object] has no method 'create'

Trying to do some relatively basic client side setup with EmberJS with a small rails app. I have two things so far:
A form to post a book for sale (not actually creating it yet)
A search for books page. (Want this to be the home page as well).
The first one loads fine. When i click the link in the application template, the form loads as expected.
The second however does not. The subject error pops up when i click the link to view the search page. Here's the code i have so far:
<script type="text/x-handlebars">
<div class="nav">
{{#linkTo "index_search"}}Home{{/linkTo}}
{{#linkTo sale_records.new}}Post a book for sale{{/linkTo}}
</div>
<div class="container">
{{outlet}}
</div>
</script>
Javascript:
// router.js
(function() {
LocalBookFinder.Router.map(function() {
this.resource("sale_records", { path: "/sale_records" }, function() {
this.route('new');
});
this.route("index_search", { path: "/search" });
});
LocalBookFinder.NewSalesRecordRoute = Ember.Route.extend({
model: function() {
return new LocalBookFinder.SaleRecord();
},
setupController: function(controller, model) {
}
});
LocalBookFinder.IndexSearchRoute = Ember.Route.extend({
setupController: function(controller, model) {
}
});
}).call(this);
// controllers/search/index_search_controller.js
(function() {
LocalBookFinder.IndexSearchController = Ember.ObjectController.extend({
});
}).call(this);
// views/search/index_search_view.js
(function() {
LocalBookFinder.IndexSearchView = Ember.View.create({
templateName: "search/index"
});
}).call(this);
The link itself renders fine. But once i click it, i get the error message, and nothing renders. Any ideas?

There is an error where you set up IndexSearchView. It should be Ember.View.extend, not
Ember.View.create.

Ember bindings firing when not wanted, and not firing when required

Hey I'm having two different issues in my ember app, both of which involve bindings.
First, I have a binding firing when I don't want it to. Basically what I'm trying to achieve (I'm building a survey creator front-end app) is that when any text is entered into the 'name' field of a question, I want to add a new question object, which will render out another blank question at the end of the list of questions that the user is adding. This has the effect of there always being a new question, so an add question button is not required. The binding is working, and a new object is being added: however, since the binding is from the newest question object, the binding is triggered again when the new object is created, which in turn creates a new object, which triggers the binding again....which obviously eventually crashes the browser. I've tried using the Ember._suspendObserver function, but there isn't a lot of documentation on this, and I think I'm using it wrong - anyhow it isn't suspending the observer or pausing the binding. The observer in the code is around line 27 (contentsNameObserver)
The other issue I'm having -- I have a selection drop down box which selects what type of question the user wants (single answer, multi-choice, etc.) but the binding between the select box and the {{#each}} helper which renders the kind of question isn't triggering. I'm using the Ember.Select view helper, so there shouldn't be any issues with using get/set to fire the binding. I'm using a computed property to return an array of fields for the question type based on the value of the question type id. The computed property is in line 13 (App.SurveyContent.types), and the template templates/step3. Quick heads up that this app may be extended for more than surveys, hence 'questions' are often referred to in the code as 'content'.
I'm pretty new to ember (this is my first real app) so my code most likely has a lot of issues outside of these problems...so any comments on how I've structured my app would be hugely appreciated as well!
Javascript ember app:
App = Ember.Application.create({
rootElement: '#emberContainer'
});
App.SurveyContent = Ember.Object.extend({
name: "",
content_type: 1,
content_pos: 1,
hash: Em.A([]),
types: function() {
alert("redraw");
return App.ContentTypes[this.content_type-1].hash;
}.property()
});
App.Surveys = Ember.Object.create({
name: null,
start: $.datepicker.formatDate('mm/dd/yy' , new Date()),
end: $.datepicker.formatDate('mm/dd/yy' , new Date()),
themeID: 0,
contents: [App.SurveyContent.create()], //Pushing an instance of App.SurveyContent onto this
contentsNameObserver: function() {
context = this;
console.log("entering");
Em._suspendObserver(App.Surveys, "contents.lastObject.name", false, false, function() {
console.log("suspend handler");
context.contents.pushObject(App.SurveyContent.create());
})
}.observes("contents.lastObject.name")
});
App.ContentTypes = [
Ember.Object.create({name: 'Text question', id:1, hash: [Ember.Object.create({name: 'Question', help: 'Enter the question here', type: 'text'})]}),
Ember.Object.create({name: 'Multichoice question', id:2, hash: [Ember.Object.create({name: 'Question', help: 'Enter the question here', type: 'text'}),
Ember.Object.create({name: 'Answer', help: 'Enter possible answers here', type: 'text', multiple: true})]})
];
App.ViewTypeConvention = Ember.Mixin.create({
viewType: function() {
console.log(this);
return Em.get("Ember.TextField");
}.property().cacheable()
});
App.CRMData = Ember.Object.extend();
App.CRMData.reopenClass ({
crm_data: [],
org_data: [],
org_display_data: [],
loadData: function() {
context = this;
context.crm_data = [];
$.getJSON ("ajax/crm_data", function(data) {
data.forEach(function(crm) {
context.crm_data.pushObject(App.CRMData.create({id: crm.crm_id, name: crm.crm_name}));
crm.orgs.forEach(function(org) {
context.org_data.pushObject(App.CRMData.create({id: org.org_id, name: org.org_name, crm_id: crm.crm_id}));
}, context)
}, context)
context.updateOrganisations(5);
});
return this.crm_data;
},
updateOrganisations: function(crm_id) {
context = this;
this.org_display_data.clear();
console.log("clearing the buffer")
console.log(this.org_display_data)
context.org_data.forEach(function(org) {
if(org.crm_id == crm_id) {
context.org_display_data.pushObject(App.CRMData.create({id: org.id, name: org.name}));
}
}, context)
}
});
App.DateField = Ember.TextField.extend({
attributeBindings: ['id', 'class']
});
App.CRMSelect = Ember.Select.extend({
attributeBindings: ['id'],
change: function(evt) {
console.log(evt)
App.CRMData.updateOrganisations($('#crm').val())
}
});
App.ApplicationController = Ember.Controller.extend();
App.Step1Controller = Ember.ArrayController.extend({});
App.Step2Controller = Ember.ArrayController.extend({});
App.Step2Controller = Ember.ArrayController.extend({});
App.ApplicationView = Ember.View.extend({
templateName: 'app'
});
App.Step0View = Ember.View.extend ({
templateName: 'templates/step0'
});
App.Step1View = Ember.View.extend ({
templateName: 'templates/step1'
});
App.Step2View = Ember.View.extend ({
templateName: 'templates/step2',
didInsertElement: function() {
$( ".jquery-ui-datepicker" ).datepicker();
}
});
App.Step3View = Ember.View.extend ({
templateName: 'templates/step3',
});
App.Router = Em.Router.extend ({
enableLogging: true,
root: Em.Route.extend ({
showstep1: Ember.Route.transitionTo('step1'),
showstep2: Ember.Route.transitionTo('step2'),
showstep3: Ember.Route.transitionTo('step3'),
index: Ember.Route.extend({
route: '/',
connectOutlets: function(router){
router.get('applicationController').connectOutlet( 'step0');
}
}),
step1: Ember.Route.extend ({
route: 'step1',
connectOutlets: function(router){
router.get('applicationController').connectOutlet( 'step1', App.CRMData.loadData());
}
}),
step2: Ember.Route.extend ({
route: 'step2',
connectOutlets: function(router) {
router.get('applicationController').connectOutlet('step2')
},
}),
step3: Ember.Route.extend ({
route: 'step3',
connectOutlets: function(router) {
router.get('applicationController').connectOutlet('step3')
},
})
})
});
Ember.LOG_BINDINGS=true;
App.LOG_BINDINGS = true;
App.ContentTypes.forEach(function(object) {
object.hash.forEach(function(hash) {
hash.reopen(App.ViewTypeConvention);
}, this);
}, this);
Html templates (I've got these in haml, so this is just a representation of the important ones)
<script type="text/x-handlebars" data-template-name="app">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="templates/step3">
<h1> Add content to {{App.Surveys.name}} </h1>
<br>
<div id = "accordion2" class = "accordion">
{{#each content in App.Surveys.contents}}
<div class="accordion-group">
<div class = "accordion-heading">
<a class = "accordion-toggle" data-parent = "#accordion2" data-toggle = "collapse" href = "#collapseOne">
{{content.name}}
</a>
</div>
<div id = "collapseOne" class = "accordion-body collapse in">
{{view Ember.TextField valueBinding="content.name" class="txtName"}}
<form class = "form-horizontal">
<div class = "accordion-inner">
<div class = "control-group">
<label class = "control-label" for ="organisation">
Content Type
<div class = "controls">
{{view Ember.Select contentBinding="App.ContentTypes" optionValuePath="content.id" optionLabelPath="content.name" valueBinding="content.content_type"}}
</div>
</div>
</div>
{{#each item in content.types }}
<div class = "control-group" >
<label class = "control-label" for = "organisation">
{{item.name}}
<div class = "controls">
{{view item.viewType }}
</div>
{{/each}}
</div>
</form>
</div>
{{/each}}
</div>
</div>
<br>
<div class = "btn" {:_action => 'showstep3'}> Next Step > </div>
</script>

I've solved the first issue, although I didn't get the suspendObserver property working I used an if statement to check the previous element, removing the infinite loop.
contentsNameObserver: function() {
context = this;
if(this.get('contents.lastObject').name) {
context.contents.pushObject(App.SurveyContent.create());
}
}.observes("contents.lastObject.name")
Any comments on how to get the _suspendObserver handler working would be appreciated though, it is something that should work but I'm doing something wrong
I've created a stripped down jsfiddle at http://jsfiddle.net/reubenposthuma/sHPv4/
It is set up to go straight to the problem step, step 3, so that I don't need to include all the previous templates.
I'm still stuck on the issue of the binding not firing though. The behaviour I'm expecting is that when the 'Content Type' dropdown box is changed, the text box underneath should change, it should re-render with two text boxes.

I realise this is an old question, but there is no documenation and precious little information I could find searching either, hence sharing what I found worked here.
What I found worked was to call Ember._suspendObserver as follows:
somePropertyDidChange: function(key) {
var that = this;
Ember._suspendObserver(this, key, null,
'somePropertyDidChange', function() {
// do stuff which would normally cause feedback loops
that.set('some.property', 'immune to feedback');
});
}.observes('some.property');
You can also use the multiple observer variant as follows:
somePropertiesDidChange: function(key) {
var that = this;
Ember._suspendObservers(this, ['some.property', 'another.property'],
null, 'somePropertiesDidChange', function() {
// do stuff which would normally cause feedback loops
that.set('some.property', 'immune to feedback');
that.set('another.property', 'also immune to feedback');
});
}.observes('some.property', 'another.property');
In my exact use case I actually called Ember._suspendObservers from an Ember.run.once() function which was setup by the observer since I wanted to make sure a number of dependant properties had settled before doing calculations which in turn would mutate some of those properties.