app/models/product.js
import DS from 'ember-data';
var Product = DS.Model.extend({
name: DS.attr('string'),
pictures: DS.hasMany('picture', { async: true })
});
export default Product;
app/models/pictures.js
import DS from 'ember-data';
var Picture = DS.Model.extend({
url: DS.attr('string'),
alt: DS.attr('string')
});
export default Picture;
In the product index view I can display all pictures with this code:
{{#each picture in product.pictures}}
<img {{bind-attr src=picture.url}} alt="example">
{{/each}}
How can I display just the first picture?
The following should work for you:
<img src={{product.pictures.firstObject.url}} alt="example">
The properties firstObject and lastObject are available in Ember.
Also note, you don't need to use bind-attr anymore.
Related
I am trying to use this addon to create a tree from my data. I can successfully create a tree from the examples provided in the test/dummy in github, but when I try to use data from a model it seems to be expecting json data and not the ember model.
// models/user.js
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string'),
children: DS.hasMany('user', {inverse: 'parent', async: true}),
parent: DS.belongsTo('user', {inverse: 'children', async: true})
});
// routes/users.js
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return this.store.findAll('user');
}
});
// templates/users.hbs
<h2>Users</h2>
<div class="sample-tree">
{{ember-jstree
data= model
}}
</div>
I have searched for a working example but so far have not found one.
Yes, it expects a plain old JavaScript object in a particular format, not an Ember Data model.
There is an open source working example in Ember Twiddle here: https://github.com/ember-cli/ember-twiddle/blob/7e6739a5fb4c80c454bd173ca93ecbb4f1777250/app/components/file-tree.js#L12
Heyy!!
I'm having trouble passing a model to a route in ember cli. I'm making a simple app where posts have and author and a title. When you click the title you go to the post details and when you click the author you go to the author's profile. My problem is that I go to the respective user but when I refresh the page I get a n error in the author route. I have no idea why, I'm guessing it has to do with the model not being fetched again when I refresh since it passes the model using link-to helper
My code (client):
app/models/author.js
import DS from 'ember-data';
export default DS.Model.extend({
posts: DS.hasMany('post', {async: true}),
name: DS.attr('string'),
url: DS.attr('string')
});
app/models/post.js
import DS from 'ember-data';
var attr= DS.attr;
export default DS.Model.extend({
author: DS.belongsTo('author'),
title: attr('string'),
description: attr('string'),
date: attr('date'),
url:attr('string'),
});
app/routes/author.js
import Ember from 'ember';
export default Ember.Route.extend({
setupController: function(controller, model) {
model.reload();
controller.set('model', model);}
});
app/templates/posts.hbs
<div class="container" style="width:70%">
{{#each model as |post|}}
<div class="well">
<div class="media">
<a class="pull-left" >
<img class="media-object" src={{post.url}} style="width:200px;height:200px">
</a>
<div class="media-body">
<h1>{{#link-to 'post' post}}{{post.title}}{{/link-to}}</h1>
<h4>Posted by: {{#link-to 'author' post.author.id}} {{post.author.name}}{{/link-to}} </h4>
<p>{{post.description}}</p>
</div>
</div>
</div>
{{/each}}
</div>
My Code (server):
var authors=[];//list of authors
var profileRouter= express.Router();
profileRouter.get('/', function(req, res) {
res.send({
'authors':authors
});
});
profileRouter.get('/:id', function(req, res) {
res.send({
'author': authors.find(function(user){
return author.id==req.params.id
// id: req.params.id,
})
});
});
app.use('/api/author', profileRouter);
You are correct that link-to is passing the model, which is not happening when the page is refreshed. You need to define the model hook on the author route (which is not called when the model is passed) -
model: function(params) {
return this.store.find('author', params.id);
}
I sideload products of a given category. The problem is that they are not sorted. I'd like to sort them by id and render the sorted products in a select.
How can I sort them?
app/category/model.js
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string'),
products: DS.hasMany('product', { async: true })
});
route.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return {
category: this.store.find('category', 1)
};
}
});
template.hbs
{{view "select" prompt="All products"
content=model.category.products
optionLabelPath="content.name"
optionValuePath="content.name"
value=selectedProduct
class="form-control"}}
You can use a computed property and the Ember.SortableMixin to sort the products in your controller:
sortedProducts: Ember.computed('model.category.products', function() {
return Ember.ArrayProxy.createWithMixins(Ember.SortableMixin, {
sortProperties: ['id'],
sortAscending: true,
content: this.get('model.category.products')
});
})
And then simply use sortedProducts instead of model.category.products.
Source
I'm building an Ember-CLI app using the following:
DEBUG: Ember : 1.10.0
DEBUG: Ember Data : 1.0.0-beta.15
DEBUG: jQuery : 2.1.3
Using a form, I'm trying to save changes on 2 separate models.
One of the models (the user model) saves successfully, while the other (profile model) throws this error:
Uncaught Error: No model was found for 'userProfile'
Models
The two models in question are:
models/user.js
models/user/profile.js
user model:
import DS from "ember-data";
export default DS.Model.extend({
email: DS.attr('string'),
username: DS.attr('string'),
firstname: DS.attr('string'),
lastname: DS.attr('string'),
comments: DS.hasMany('comments'),
});
profile model:
import DS from "ember-data";
export default DS.Model.extend({
avatar: DS.attr('string'),
educationDegree: DS.attr('string'),
educationUniversity: DS.attr('string'),
workRole: DS.attr('string'),
workOrganisation: DS.attr('string'),
interests: DS.attr('string'),
});
Controller
import Ember from "ember";
export default Ember.Controller.extend({
saved:false,
actions: {
save:function(){
this.get('model.user').save();
this.get('model.profile').save();
this.set('saved',true);
},
},
});
Route
import Ember from 'ember';
import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';
export default Ember.Route.extend(AuthenticatedRouteMixin, {
model: function(){
var _this = this;
var currentUser = this.get('session.user');
return new Ember.RSVP.all([
_this.store.find('user', currentUser.id),
_this.store.find('user.profile', {UserId: currentUser.id}),
]).then(function(values){
return {
user: values[0],
profile: values[1].get('firstObject'),
}
});
},
});
Template
<form {{action "save" on="submit"}}>
{{input type="text" placeholder="First Name" value=model.user.firstname}}
{{input type="text" placeholder="Last Name" value=model.user.lastname}}
{{input type="email" placeholder="Email" value=model.user.email}}
{{input type="text" placeholder="Affiliation" value=model.profile.workOrganisation}}
<button type="submit" class="btn teal white-text">Save</button>
{{#if saved}}
<p class="text-valid">Save Successful.</p>
{{/if}}
</form>
This error occurs because Ember Data cannot find a model into which to insert the data coming back from the PUT ensuing from the save, which I assume looks like
{ userProfile: { ... } }
I don't know the exact rules by which Ember looks up models based on these "root keys" such as userProfile, but I doubt if it can find the profile model hiding down underneath models/user/.
In the past the following has worked for me, if you have control over the server:
{ "user/profile": { ... } }
If you can't change the server response, or this fails to work for some other reason, the simplest thing to do is to move the profile model up to the top level of the models directory and name it user-profile.js.
Another alternative is to play with modelNameFromPayloadKey:
// serializers/application.js
import DS from 'ember-data';
export default DS.RESTSerializer.extend({
modelNameFromPayloadKey: function(payloadKey) {
if (payloadKey === 'userProfile') payloadKey = 'user/profile';
return this._super(payloadKey);
}
});
I'm working on a simple todo app where each todo item belongs to a user. I'm getting this error:
Uncaught Error: Nothing handled the action 'createTodo'.
I think I'm missing a route and maybe a controller, but I'm not really sure what I need to do.
app/router.js:
import Ember from 'ember';
var Router = Ember.Router.extend({
location: TodoENV.locationType
});
Router.map(function() {
this.route('about');
this.resource('users', function() {
this.route('show', {path: ':user_id'});
});
});
export default Router;
app/routes/users/index.js:
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.find('user');
}
});
app/models/user.js:
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string'),
todos: DS.hasMany('todo')
});
app/models/todo.js:
import DS from 'ember-data';
export default DS.Model.extend({
title: DS.attr('string'),
user: DS.belongsTo('user')
});
app/controllers/todo.js:
import Ember from 'ember';
export default Ember.ArrayController.extend({
actions: {
createTodo: function() {
var title = this.get('newTitle');
if (!title.trim()) { return; }
var todo = this.store.createRecord('todo', {
title: title // how do I get the user id?
});
this.set('newTitle', '');
todo.save();
}
}
});
app/templates/users/show.hbs:
<h4>{{name}}</h4>
<h5>Todos</h5>
{{input type="text" id="new-todo" placeholder="new todo"
value=newTitle action="createTodo"}}
<ul>
{{#each todos}}
<li>{{title}}</li>
{{/each}}
</ul>
The problem is createTodo is implemented in TodoController whereas you are using createTodo action in users/show template. Action is sent to the UsersShowController where createTodo is not implemented. Move createTodo action into UsersShowController and everything should be OK.