I'm trying to display the names of each department. I handmade a 'department' model based off of another model i made that does work. Despite them being identical, #each will not loop through the 'departments' and list them.
departments.hbs >
{{#each model}}
<tr>
<td>
{{#linkTo 'department' this}}{{this.departmentName}}{{/linkTo}}
</td>
<td>{{this.departmentName}}</td>
</tr>
{{/each}}
No errors. It just doesn't list the departments.
VpcYeoman.DepartmentsView = Ember.View.extend({
templateName: 'departments'});
VpcYeoman.DepartmentView = Ember.View.extend({
templateName: 'department'
});
VpcYeoman.DepartmentsController = Ember.ObjectController.extend({
// Implement your controller here.
});
VpcYeoman.Department = DS.Model.extend({
departmentName: DS.attr('string'),
departmentMembers: DS.attr('string')
});
VpcYeoman.Department.reopen({
// certainly I'm duplicating something that exists elsewhere...
attributes: function(){
var attrs = [];
var model = this;
Ember.$.each(Ember.A(Ember.keys(this.get('data'))), function(idx, key){
var pair = { key: key, value: model.get(key) };
attrs.push(pair);
});
return attrs;
}.property()
});
VpcYeoman.Department.FIXTURES = [
{
id: 0,
departmentName: "Sickness",
departmentMembers: "61"
},
{
id: 1,
departmentName: "Health",
departmentMembers: "69"
}
];
'department/#/' DOES work. Why is {{#each model}} not able to find the list of departments?
EDIT:
VpcYeoman.DepartmentsController = Ember.ArrayController.extend({
// Implement your controller here.
});
Upon entering {{log model}} before the {{#each model)) loop, I get this response:
[nextObject: function, firstObject: undefined, lastObject: undefined, contains: function, getEach: function…]
__ember1386699686611_meta: Meta
length: 0
__proto__: Array[0]
VpcYeoman.DepartmentsRoute = Ember.Route.extend({
renderTemplate: function() {
this.render();
}
});
VpcYeoman.DepartmentRoute = Ember.Route.extend({});
You need to declare a DepartmentsRoute with the following:
VpcYeoman.DepartmentsRoute = Ember.Route.extend({
model: function() {
return this.store.find('department');
}
});
DepartmentsController should probably be an ArrayController, and you can view the model in the console to validate it has something using ((log model)) before your each
You need to implement a model hook, returning the departments
VpcYeoman.DepartmentsRoute = Ember.Route.extend({
model: function(){
return this.store.find('department');
},
renderTemplate: function() {
this.render();
}
});
the department route is guessing based on the route name and implementing the default model hook.
Related
I'm trying to achieve the following with Ember-CLI:
After an initial list of items is loaded, the user can select a city from the dropdown to see only those items that are interesting to him/her. In my case that's districts in cities. You can select from a dropdown list a city to see
only districts in that city.
Ideally, all should happen without calling an separately (on click).
So far, I've got this, but the console.log for 'filteredContent' returns an array of 0 elements. Any hints where I'm doing something wrong?
district/index.hbs:
<p>{{view "select" content=cities optionValuePath="content.id" optionLabelPath="content.name" selection=selectedCity}}</p>
{{#each item in filteredContent}}
<p>{{item.name}} in {{item.city.name}}</p>
{{/each}}
route:
var DistrictListRoute = Ember.Route.extend({
model: function () {
return this.store.find('district');
},
setupController: function(controller, model) {
this._super(controller, model);
this.store.find('city').then(function(cities) {
controller.set('cities', cities);
});
}
});
export default DistrictListRoute;
controller:
export default Ember.Controller.extend({
filteredContent: [],
selectedCity: null,
selectedCityChanged: function () {
var selectedCity = this.get('selectedCity');
console.log(selectedCity);
var filteredContent = this.get('model').filterBy('city', selectedCity);
console.log(filteredContent);
}.observes('selectedCity')
});
model:
export default DS.Model.extend({
city: DS.belongsTo('city', {async: true}),
name: DS.attr('string'),
advert: DS.hasMany('item')
});
Finally figured it out:
Controller:
export default Ember.ArrayController.extend({
selectedCity: null,
filteredContent: [],
selectedCityChanged: function () {
var selectedCity = this.get('selectedCity');
var filteredContent = this.get('model').filterBy('city.id', selectedCity.id);
this.set('filteredContent', filteredContent);
}.observes('selectedCity')
And then, handlebars template needed some tweaking:
<p>{{view "select" content=cities optionValuePath="content.id" optionLabelPath="content.name" selection=selectedCity}}</p>
{{#if filteredContent}}
<h2>District in {{selectedCity.name}}</h2>
{{#each district in filteredContent}}
<p>{{district.name}} in {{district.city.name}}</p>
{{/each}}
{{else}}
<h2>Districts</h2>
{{#each district in content}}
<p>{{district.name}} in {{district.city.name}}</p>
{{/each}}
{{/if}}
I'm creating a small multiplayer games using ember on the frontend.
I have a games list in the homepage, I want to show the amount of cards there are present in a game too.
App.Game = DS.Model.extend({
serverSeedHash: DS.attr(),
serverSeed: DS.attr(),
table: DS.belongsTo('table'),
bingoCards: DS.hasMany('bingoCard')
});
App.BingoCard = DS.Model.extend({
player: DS.attr(),
clientSeed: DS.attr(),
game: DS.belongsTo('game'),
player: DS.belongsTo('player')
});
App.GamesRoute = Ember.Route.extend({
model: function () {
return Ember.RSVP.hash({
games: this.store.find('game'),
bingoCards: this.store.find('bingoCard')
});
},
setupController: function (controller, model) {
controller.setProperties(model);
}
});
App.GamesController = Ember.ArrayController.extend({
needs: ['game']
});
App.GameController = Ember.ObjectController.extend({
amountOfCards: function () {
return this.get('bingoCards.length');
}.property('bingoCards.#each')
});
Whenever I go to a specific game I can access the amountOfCards property just fine by typing {{amountOfCards}} inside the game template.
However, when I try to display it on the homepage, it won't work in the each loop.
{{#each game in games}}
<tr>
<td>{{game.id}}</td>
<td>{{amountOfCards}} {{game.amountOfCards}}</td>
<td>{{#link-to 'game' game.id}}Join{{/link-to}}</td>
</tr>
{{/each}}
Basically my question is: I have multiple games, each game has multiple bingoCards. I want compute a property per game based on the bingoCards. How can I do this?
You're gonna have to specify an itemController that will wrap each individual game into a controller (usually an ObjectController) of your choice.
Template
{{#each game in controller}}
<tr>
<td>{{id}}</td>
<td>{{amountOfCards}}</td>
<td>{{#link-to 'game' id}}Join{{/link-to}}</td>
</tr>
{{/each}}
Route
App.GamesRoute = Ember.Route.extend({
model: function() {
return Ember.RSVP.all([
this.store.find('game'),
this.store.find('bingoCard')
]);
},
setupController: function(controller, model) {
var games = model[0];
controller.set('content', games);
}
});
Controllers
App.GamesController = Ember.ArrayController.extend({
itemController: 'game'
});
App.GameController = Ember.ObjectController.extend({
amountOfCards: function () {
return this.get('bingoCards.length');
}.property('bingoCards.#each', 'bingoCards.length')
});
You can read more about it on the Ember API
I want to change the header of my RESTAdapter after I loaded the user, but can't access the properties.
Any Ideas why ?
The related Code:
var user = '';
App.MainRoute = Ember.Route.extend({
model: function(params){
user = this.store.find('user',{email: params.email});
alert(user.hash); //get a undefined
return user;
},
actions:{
addList: function(){
var list = this.store.createRecord('list', {
name: 'New list',
desc: 'Describe it here'
});
this.store.find('user', 1).then(function(user){
list.set('user', user);
})
list.save();
}
}
})
The Json Response on this.store.find('user', {email: params.email});:
{
"users": [
{
"id": 1,
"hash": "66ff7d6eae591ca2a7d6b419991690e8",
"email": "marvin#blabla.de",
"name": "",
"lists": []
}
]
}
Model definitions: https://gist.github.com/Osile/5544ccab1997c4da2b5b
You have to return a Promise in Model, but you can also access it earlier. Code:
model: function(params){
users = this.store.find('user', { email: params.email }); // returns promise
users.then(function(item) { // resolves promise
user = item.get('firstObject');
alert(user.get('hash'));
});
return users; // model will wait for data
}
It works. You can use following Handlebars.js template:
<script type="text/x-handlebars" data-template-name="main">
From model:
<ul>
{{#each}} <!-- Iterate over array resolved from promise. -->
<li>{{hash}}</li>
{{/each}}
</ul>
</script>
Complete code: emberjs.jsbin.com
I have a model setup with Ember fixtures. My model is like the following:
App.Question = DS.Model.extend({
isCompleted: DS.attr('boolean'),
question_top: DS.attr('string'),
question_bottom: DS.attr('string'),
etc......
});
My fixtures (the actual data) is like the following:
App.Question.FIXTURES = [
{
id: 1
},
{
id: 2
}
];
I want to create a unordered list in my template that shows a "li" item for each record in my Fixtures. I think I need to use the {{#each question}} syntax but when I do {{#each question}}, it doesn't work.
How do I loop through my Fixtures data to create a unordered list, with one list item for each record in my Fixtures data?
Probably your question property doesn't exist in your controller. If you are doing:
App.QuestionRoute = Ember.Route.extend({
model: function() {
return this.store.find('question');
}
});
You can use:
<h2>Questions:</h2>
<ul>
{{#each model}}
<li>{{question_top}}</li>
{{/each}}
</ul>
Give a look in that fiddle http://jsfiddle.net/marciojunior/25GHN/
You need to return it to a route's model hook:
http://emberjs.jsbin.com/UGEmEXEy/1/edit
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('question');
}
});
App.QuestionAdapter = DS.FixtureAdapter;
App.Question = DS.Model.extend({
isCompleted: DS.attr('boolean'),
question_top: DS.attr('string'),
question_bottom: DS.attr('string')
});
App.Question.FIXTURES = [
{
id: 1,
isCompleted: true
},
{
id: 2,
isCompleted: false
}
];
I am having a problem adding an array controller as an item controller of another array controller.
Error I am getting is:
Error while loading route: TypeError {} ember.min.js:15
Uncaught TypeError: Object # has no method 'addArrayObserver'
JSFiddle: http://jsfiddle.net/t5Uyr/3/
Here is my HTML:
<script type="text/x-handlebars">
<table>
<thead>
<tr>
<th>id</th>
<th>items</th>
</tr>
</thead>
<tbody>
{{#each}}
<tr>
<td>{{id}}</td>
<td>
<ul>
{{#each items}}
<li>{{formattedName}}</li>
{{/each}}
</ul>
</td>
</tr>
{{/each}}
</tbody>
</table>
</script>
As you can see, inside the template I iterate over a collection of data with each loop, inside the each loop I want to iterate over a subcollection of the data.
Here is my JS code:
window.App = Ember.Application.create({});
App.ApplicationRoute = Ember.Route.extend({
model: function () {
var data = [
{
id: "111",
items: [
{
name: "foo"
},
{
name: "bar"
}
]
},
{
id: "222",
items: [
{
name: "hello"
},
{
name: "world"
}
]
}
];
return data;
}
});
App.ApplicationController = Ember.ArrayController.extend({
itemController: "row"
});
App.RowController = Ember.ArrayController.extend({
itemController: "item"
});
App.ItemController = Ember.ObjectController.extend({
formattedName: function () {
return "My name is " + this.get("name");
}.property("name")
});
App.RowController should be an objectController your items (rows) are objects with an array in one of their properties and not arrays themselves...
You can assing the controller in the inner each directly and remove itemController from the App.RowController.
JavaScript
App.RowController = Ember.ObjectController.extend()
Handlebars
{{each items itemController='item'}}
JsFiddle http://jsfiddle.net/mUJAa/3/