I am trying to write my first Ember app and not sure at all what I'm doing. I am doing this in an ASP MVC 4 project and I want to be able to click the "Agent" menu tab, and have Ember grab the relevant information from the Agent controller.
When I think I have this set up properly, because when I click on the "Agent" menu item I get the following error:
"Error while loading route"
Again, this is my first attempt at Ember, so I would assume that means the ajax call is being attempted, so I've routed this properly but the Razor syntax is not being translated properly.
App = Ember.Application.create();
App.Store = DS.Store.extend({
adapter: 'DS.FixtureAdapter'
});
App.Router.map(function () {
this.resource('home', { path: "/Index" });
this.resource('agents', { path: "/Agents" });
this.resource('topics', function() {
this.resource('topic', {path: '/topic/:topic_id'})
});
this.resource('contacts', { path: "/Contacts" });
});
App.AgentsRoute = Ember.Route.extend({
model: function () {
return App.Store.all();
}
})
App.Store.reopenClass({
all: function () {
return $.ajax({
type: 'GET',
data: {id: '1'},
url: '#Url.Action("GetAgentData", "Agent")',
sucess: function (data) {
return data;
}
});
}
});
EDIT
Per request here is the handlebars code from my layout.cshtml page.
<nav>
<script type="text/x-handlebars">
<div class="navbar">
<div class="navbar-inner">
<ul id="menu">
<li>{{#linkTo 'home'}}Home{{/linkTo}}</li>
<li>{{#linkTo 'agents'}}Agents{{/linkTo}}</li>
<li>{{#linkTo 'topics'}}About{{/linkTo}}</li>
<li>{{#linkTo 'contacts'}}Contact{{/linkTo}}</li>
</ul>
</div>
</div>
{{outlet}}
</script>
</nav>
Related
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);
}
});
I am fairly a newbie to ember.js. I currently working on a school project which is essentially a message board (forum) application that allows users to add posts with comments.
My application contains three models: courses, messages, comments
course->hasMany->messages->hasMany->comments
So far I have been able to view all the courses and related messages using filter query to my server. Adding new messages works fine also except that it is not updating the new message added to the screen.
Problem: It is only when I refresh the page the new message I added is displayed.
App.Router.map(function() {
this.resource('home', { path : '/'}, function() {
this.resource('mycourse', { path : ':course_id' } );
});
});
App.MycourseRoute = Ember.Route.extend({
model: function(params) {
// the model for this route is a new empty Ember.Object
var string = '{"filters":[{"name":"courseid","op":"eq","val":'+params.course_id+'}]}'
return this.store.find('message', { q: string });
}
});
App.HomeRoute = Ember.Route.extend(
{
model: function() {
return this.store.find('course');
}
});
Here is my message controller:
App.MycourseController = Ember.ArrayController.extend({
actions: {
addMessage: function(messageText) {
var message = messageText;
var messageAdd =this.store.createRecord('message', {
message: message,
posttime: "12:00pm",
courseid: 4,
userid: 1
});
messageAdd.save();
}
}
});
My html part:
<script type="text/x-handlebars" id="home">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
{{#each}}
<li>{{#link-to 'mycourse' this.id}}{{name}}{{/link-to}}</li>
{{/each}}
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Subscribed Courses:</h1>
{{outlet}}
</div>
</div>
</script>
<script type="text/x-handlebars" id="mycourse">
<button class="btn btn-default" type="button" id="create-message" {{action "addMessage" messageTxt}}>
Post!
</button>
{{input type="text" value=messageTxt}}
<br><br>
{{#each}}
<b>{{message}}</b>
<li>{{posttime}}</li>
<li>User name: {{user.username}}</li>
<li>Course name: {{course.alt_name}}</li>
<h4>Comments:</h4>
{{#each comments}}
<li>{{comment}}</li>
{{/each}}
<br>
{{/each}}
</script>
Turns out when you use findQuery (which I believe is the same as using find with query parameters), Ember does not return a live updating array, whereas it does for a straight up find/findAll. See this question on that exact issue that I asked a while back.
The solution here (adapted from kingpin2k's answer to said question) is to use filter to trick Ember into auto-updating:
App.MycourseRoute = Ember.Route.extend({
model: function(params) {
// the model for this route is a new empty Ember.Object
var string = '{"filters":[{"name":"courseid","op":"eq","val":'+params.course_id+'}]}'
return this.store.find('message', { q: string });
},
setupController:function(controller, model){
var filter = this.store.filter('color', function(color){
return model.contains(color);
});
this._super(controller, filter);
}
});
How can you filter a data-list to render into multiple outlets in emberjs.
What I have now in not really working, but may help you understand what I want to achieve.
I can solve this by making multiple file-list.hbs template-files ( where I change file in the each to fileList1 or fileList2, ...), but that doesn't seem right.
What I want to achieve
I have a documents page where I want to list all of the document in the file list (see fixtures file). But instead of printing out one files-list, I want to split the lists so I have multiple lists according to the filter.
Please look at the code to understand it better ^^
Can anyone help? :)
File.FIXTURES
App.File.FIXTURES = [
{
id: 1,
showHomepage: false,
filter: 'filter1',
url: '/file1.pdf',
description: 'file1'
},
{
id: 2,
showHomepage: false,
filter: 'filter2',
url: '/file2.pdf',
description: 'file2'
},
{
id: 3,
showHomepage: true,
filter: 'filter2',
url: '/file3.pdf',
description: 'file3'
},
{
id: 4,
showHomepage: true,
filter: 'filter3',
url: '/file4.pdf',
description: 'file4'
}
];
Route
App.InfoDocumentenRoute = Ember.Route.extend({
model: function() {
var store = this.store;
return Ember.RSVP.hash({
fileList1: store.find('file' , { filter: "filter1" }),
fileList2: store.find('file' , { filter: "filter2" }),
fileList3: store.find('file' , { filter: "filter3" })
});
},
renderTemplate: function() {
this.render('file-list', { // the template to render
into:'info.documenten', // the route to render into
outlet: 'file-list-filter1', // the name of the outlet in the route's template
controller: 'file' // the controller to use for the template
});
this.render('file-list', { // the template to render
into:'info.documenten', // the route to render into
outlet: 'file-list-filter2', // the name of the outlet in the route's template
controller: 'file' // the controller to use for the template
});
this.render('file-list', { // the template to render
into:'info.documenten', // the route to render into
outlet: 'file-list-filter3', // the name of the outlet in the route's template
controller: 'file' // the controller to use for the template
});
}
});
info/documents.hbs
{{ outlet file-list-filter1 }}
{{ outlet file-list-filter2 }}
{{ outlet file-list-filter3 }}
file-list.hbs
<ul class="download-list">
{{#each file in file}}
<li class="download-list__item">
<a {{bind-attr href=file.url}} target="_blank" class="download-list__link">
<i class="icon-download download-list__link__icon"></i>
{{file.description}}
</a>
</li>
{{else}}
<li>
Geen documenten beschikbaar.
</li>
{{/each}}
I think the best way to go about this would be to declare your file-list.hbs as a partial and include it within your other templates where needed as: {{partial "file-list"}}. In your showHomepage where you only want to use it a single time, merely include the {{partial "file-list"}} within your showHomepage.hbs.
Then, for your InfoDocumentRoute, put the following to declare your model as an array of filelists:
App.InfoDocumentenRoute = Ember.Route.extend({
model: function() {
var store = this.store;
return [
store.find('file' , { filter: "filter1" }),
store.find('file' , { filter: "filter2" }),
store.find('file' , { filter: "filter3" })
];
}
});
And your InfoDocument.hbs as:
{{#each file in model}}
{{partial "file-list"}}
{{/each}}
Which will then render the file-list template for each item in the model array.
More info about partials
So from what i gather about your question you want to filter your model on your filter property on the model. I am sure there are a few ways to accomplish this but here is another possible solution that could spark another solution.
So in the route I returned the models. Then in the controller I created properties that are filtering the array of models from the route. Then in the template I loop over the array that filter property gives me in the controller and output in the template.
Heres JSBin. http://emberjs.jsbin.com/vunugida/5/edit
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.findAll('File');
}
});
App.IndexController = Ember.ArrayController.extend({
filter1: function() {
return this.filter(function(item) {
return item.get('filter') === "filter1";
});
}.property(),
filter2: function() {
return this.filter(function(item) {
return item.get('filter') === "filter2";
});
}.property(),
filter3: function() {
return this.filter(function(item){
return item.get('filter') === "filter3";
});
}.property()
});
TEMPLATE:
<script type="text/x-handlebars" data-template-name="index">
<h1>Index Template</h1>
<ul>
{{#each}}
<li>{{url}}</li>
{{/each}}
</ul>
<p>Filter 1</p>
{{#each filter1}}
<li>{{url}}</li>
{{/each}}
<p>Filter 2</p>
{{#each filter2}}
<li>{{url}}</li>
{{/each}}
<p>Filter 3</p>
{{#each filter3}}
<li>{{url}}</li>
{{/each}}
</script>
im having a problem with my ember app. Im new to it, and trying to do something fun. So the idea of this app is to go and fetch a list of artists from a server via an ajax call, and then if you click the artist it will go to the server again and fetch the albums via another ajax call.
So the first part is working, it is actually fetching the artists through the ajax call when i click on "music library", but then when clicking on the artist it throws the following error:
Assertion failed: Error while loading route: TypeError: Object [object Object] has no method 'addArrayObserver'
I've read so many different options, and i think im on the right track because by printing on the console i can see that it is actually going to the server and fetching the right artist's albums, but the error is throw at the last moment, so it is not displaying the albums. I was also able to show the albums when reloading or typing the url (not now, since i changed the code to implement the afterModel)
So, here is my code:
App = Ember.Application.create({
LOG_TRANSITIONS: true,
LOG_TRANSITIONS_INTERNAL: true
});
App.Library = Ember.Object.extend({
name: null,
artist: []
});
App.Library.reopenClass({
loadArtist: function() {
var artistList = Em.A();
$.getJSON('url').then(function(data){
//json parsing, creating a library object and putting it into the array
});
return artistList;
}
});
App.Artist = Ember.Object.extend({
id: null,
name: null,
coverArt: null,
albumCount: null
});
App.Albums = Ember.Object.extend({
albums: []
});
App.Artist.reopenClass({
loadAlbums: function(params) {
var albumsJson = 'url' + params.artist_id +'';
var albumList = Em.A();
$.getJSON(albumsJson).then(function(data){
//parsing json, creating artist objects and pushing them into the array
});
return albumList;
//});
}
});
/*****************************ROUTER**************************************************************************************/
App.Router.map(function() {
// put your routes here
this.resource('library', function() {
this.resource('artist', { path: '/:artist_id'});
});
});
App.IndexRoute = Ember.Route.extend({
model: function() {
var hi = ['Welcome'];
return hi;
}
});
App.LibraryRoute = Ember.Route.extend({
model: function() {
return App.Library.loadArtist();
}
});
App.ArtistRoute = Ember.Route.extend({
model: function(params) {
this.transitionTo('artist', params);
},
afterModel: function(params, transition){
var artist = Em.A();
if(params.artist_id==null){
artist.push(App.Artist.create({artist_id: params.id}));
} else {
artist.push(App.Artist.create({artist_id: params.artist_id}));
}
return App.Artist.loadAlbums(artist[0]);
}
});
/**************************************CONTROLLERS***********************************************************************************/
App.ArtistController = Ember.ArrayController.extend({
needs: "library"
});
App.LibraryController = Ember.ArrayController.extend({});
I would really appreciate some help!
Also, the HTML is as follows:
<script type="text/x-handlebars">
<div class="navbar navbar-default">
<div class="navbar-inner">
<a class="navbar-brand" href="#">My Library</a>
<ul class="nav navbar-nav">
<li>{{#linkTo 'index'}}Home{{/linkTo}}</li>
<li>{{#linkTo 'library'}}Music Library{{/linkTo}}</li>
</ul>
</div>
</div>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<div class="container">
{{#each item in model}}
<h1>{{item}}</h1>
{{/each}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="library">
<div class="container">
<div class="row">
<div class="col-md-4">
<table class="table">
{{#each model}}
<tr><td>
{{name}}
</td></tr>
{{#each artist}}
<tr><td>
{{#linkTo 'artist' this}}
{{name}}
{{/linkTo}}
<!--<a {{action 'selectArtist' this}}> {{name}} </a>-->
</td></tr>
{{/each}}
{{/each}}
</table>
</div>
<div class="col-md-8">
<p>Albumes</p>
{{outlet}}
</div>
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="artist">
<div class="container">
<div class="col-md-4">
<table class="table">
<tr><td><p>{{controllers.library.artist.name}}</p></td></tr>
{{#each itemController='album'}}
<tr><td>
{{{name}}}
</td></tr>
{{/each}}
</table>
</div>
</div>
</script>
Thanks a lot!!
To get rid of the error you need to modify the model function of the App.ArtistRoute, to return an array as App.ArtistController is an Ember.ArrayController.
For example,
App.ArtistRoute = Ember.Route.extend({
model: function(params) {
//this.transitionTo('artist', params);
return [];
},
....
Or even place the code of afterModel function in model function to retrieve the albums of this artist.
Although i'm not certain if you really want the model of your artist context to be the albums, it does not look correct to me. I would suggest to make the App.ArtistController aν Ember.ObjectController, assign the model to an App.Artist object and store the albums related to this artist in a property of the App.Artist class. In that case you will need to add a property in App.Artist and create a class of App.Album.
With this in mind have a look at the following example which is a very rough modification of your code (caution the App.ArtistController has not been switched instead its model is an array of albums),
http://emberjs.jsbin.com/AdOfiyiN/2#/library/2
OK, i solved it using this question:
Why isn't my ember.js route model being called?
Instead of putting the logic in the model or afterModel, i just needed to set the controller.
Hope it helps to someone.
Best!
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.