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
Related
I create an Ember app with a Symfony REST api. I also use the REST adapter for my requests.
I have 2 models in my app : users and their related comments.
I already created CRUD operations for my user properties and now I focus on the CRUD operations for comments.
Model user.js
export default DS.Model.extend({
firstName: DS.attr('string'),
lastName: DS.attr('string'),
comments: DS.hasMany('comment')
});
Model comment.js
export default DS.Model.extend({
title: DS.attr('string'),
message: DS.attr('string'),
user: DS.belongsTo('user')
});
I have a route which shows all comments (and other data) of a given user. The request loads the user object and his relations. On the view I also have a form and an action to create a new comment for this user.
Route users/get.js
import Ember from 'ember';
export default Ember.Route.extend({
id: null,
model(params) {
this.set('id', params.user_id);
return this.get('store').findRecord('user', params.user_id, {include: 'comments'});
},
});
Route users/get/comments.js
import Ember from 'ember';
export default Ember.Route.extend({
model(params) {
return this.modelFor('user.get', params.user_id);
},
});
Controller users/get/comments.js
import Ember from 'ember';
export default Ember.Controller.extend({
newComment: null,
user: null,
init: function() {
this._super(...arguments);
let comment = this.store.createRecord('comment');
this.set('newComment', comment);
},
actions: {
saveComment: function() {
let user = this.get('model');
let comment = this.get('newComment');
comment.set('user', user);
comment.save();
}
}
});
Everything works, except for the request sent to the backend. I loaded the comments from the user, so I expect a call to :
POST http://my-app.local/users/comments/
Instead the call is sent to :
POST http://my-app.local/comments/
Do you know why and how could I correct it ?
Second problem, the model is loaded from the 'user.get' route. This works because the user comes from this route to this page, but... It's doesn't work if the user enters directly the URL for comments. That sound logical, but I have no clue how to correct this problem... Can you help me ?
This can be done by rewrite the CommentAdapter.urlForCreateRecord method. Which affect new comment record requests.
adapters/comment.js
import DS from 'ember-data';
export default DS.RESTAdapter.extend({
urlForCreateRecord(modelName, snapshot) {
return '/users/comments'; // the url you want
}
});
There are several urlFor... method you might need to customise your url.
Just check out the document
http://devdocs.io/ember/classes/ds.buildurlmixin/methods#urlForCreateRecord
So I've been beating my head against this for a few days now. I can't get my model data to render in the template at all. No errors are being thrown. Looking in the Ember Inspector, the Data tab shows my record loaded in tasks.
Any help much appreciated.
// app/adapters/application.js
import Ember from 'ember';
import FirebaseAdapter from 'emberfire/adapters/firebase';
const { inject } = Ember;
export default FirebaseAdapter.extend({
firebase: inject.service(),
});
// app/routes/tasks.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function(){
return this.store.findAll('task');
},
});
// app/model/task.js
import DS from 'ember-data';
export default DS.Model.extend({
title: DS.attr('string'),
description:DS.attr('string'),
date: DS.attr('date'),
created: DS.attr('string',{
defaultValue:function(){
return new Date();
}
})
});
// app/templates/tasks.hbs
<h2>tasks</h2>
{{#each task in model}}
<h2>{{task.title}}</h2>
{{/each}}
Ember Inspector:
View Tree:
tasks emtasks/templates/tasks <DS.RecordArray..> tasks --
Data:
task(11)
You are using a newer version of ember. Try this:
// app/templates/tasks.hbs
<h2>tasks</h2>
{{#each model as |task|}}
<h2>{{task.title}}</h2>
{{/each}}
In an application using ember 2.1.0 and ember-data 2.1.0, I have this model :
# app/models/user.js
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr()
});
And this route :
# app/routes/subscriptions/new.js
export default Ember.Route.extend({
model() {
this.store.findRecord('user', 1).then(function(data) {
console.log(data.id)
console.log(data.get('email'))
})
return this.store.find('user', 1);
}
});
I have this adapter :
import DS from 'ember-data';
export default DS.JSONAPIAdapter.extend({host: 'http://localhost:5000'})
This data is returned by the server :
{"data":{"id":"1","type":"users","attributes":{"email":"test#test.com"}}}
In the console, I have the user id but the email is undefined. In the template, {{model.email}} gives nothing.
I may miss something but it's so simple. Is it my mistake or a bug?
You have to also specify email attribute in model:
export default DS.Model.extend({
name: DS.attr('string'),
email: DS.attr('string')
});
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.
I've got a model like this:
import DS from 'ember-data';
var Post = DS.Model.extend({
title: DS.attr('string'),
downloads: DS.hasMany('download')
});
export default Post;
and would like to show the downloads-section only when there is at least 1 or more downloads in the post.
I tried introducing a computed property in the Controller but can't access the model from there.
What else can I do?
EDIT: Here's the controller showing you what I was trying to do:
import Ember from 'ember';
export default Ember.ObjectController.extend({
hasDownloads: function(){
console.log(this.get('downloads')) // <- undefined
return true
}.property('model'),
})
EDIT2: The Object-controller above has no route since it's rendered using `{{render "post"}}. This is an example-template.
<ul class="posts">
{{#with model as post}}
{{render "post"}}
{{/with}}
</ul>
That would be its route:
import Ember from 'ember';
export default Ember.Route.extend({
model: function(params) {
return this.store.find('post', params).then(function(posts) {
return posts.get('firstObject');
});
}
});
Directly access the property on your controller using model.downloads:
import Ember from 'ember';
export default Ember.ObjectController.extend({
hasDownloads: function(){
console.log(this.get('model.downloads'))
return true
}.property('model.#each'),
})
Depending upon which version of Ember you are using, the proxying behavior of the controller will no longer work. Also, change the property so that it is updated when downloads are added and removed.