I want to save a record and add to an existing list in emberjs.
I use two forms to simulate multiple models with the same property. But the main focus is on the 2nd one with books.
http://jsbin.com/pexolude/46
I use books: store.find('book',{}) where i dont really know whats the empty object is for but it prevents to have the book record to appear on the list. I only want to have it after the save.
Is it possible to set mockjax's respons accordingly the posted data, so i sont have to use a hardcoded JSON?
Ember-form doesn't appear to handle switching models out underneath it. When you do store.find('foo',{}) you're tricking Ember into finding by query. When it finds by query it only includes the records returned in the results in the collection. When you do find('foo') it returns a live collection that updates when any record is added or removed from the store. You can do a find, then toArray to avoid having it be a live collection. Then you can manually add the record to the collection, and swap out the currently editing model with a new record. Unfortunately, as stated before Ember-forms doesn't update the binding and keeps using the same record.
App.IndexRoute = Ember.Route.extend({
model: function() {
var store = this.store;
return store.find('book').then(function(books){
return {
books: books.toArray(),
book:store.createRecord('book'),
person: store.createRecord('person'),
category: [{id:1,"name":"Fantasy"},{id:2,"name":"Drama"}]
}
});
}
});
App.IndexController = Ember.Controller.extend({
actions: {
some_action: function() {
var self = this;
this.get('model.book').save().then(function(record){
var newRecord = self.store.createRecord('book');
self.get('model.books').pushObject(record);
self.set('model.book', newRecord);
console.log(newRecord);
}, function(error){
console.log('fail');
});
}
}
});
http://jsbin.com/pexolude/48/edit
Related
I have an Ember app that uses server-side storage. In the products route, I have a list of products that I display in my product route (which are fetched in the usual way upon entering the route)
{{#each item in sortedProducts}}
{{/each}}
....
fetch
App.ProductRoute = Ember.Route.extend({
model: function(){
return Ember.RSVP.hash({
store: this.store.find('product'),
//other code ommitted
})
}
})
In the controller, I do the sorting
sortProperties: ['date:desc'] //dated added
sortedProducts: Ember.computed.sort('model', 'sortProperties'),
This works, however, I give the user the option to filter the records displayed. Upon clicking a button, an action is called that queries the server for a subset of records (it doesn't just filter the records that are already in the store cache)
actions: {
filterByPriceAndColor: function(){
this.store.find('product', {price: pricevariable, color: colorvariable});
}
}
This queries and returns the desired records, but the list on the page isn't updated i.e. the list on the page still displays all the records that are fetched upon application load.
Question: how do I get the page to update with the new records fetched from the server without a route change, (and will the solution integrate with the computed sort that already exists for ordering the entries by date)
To update your model from an action (or anywhere else) you simple need to set a new value for it and Ember will to the hard work for you.
In your case it should look like this:
actions: {
filterByPriceAndColor: function() {
var promise = this.store.find('product', {price: pricevariable, color: colorvariable});
var self = this;
promise.then(function(data) {
self.set('model', data);
});
}
}
Here is a JSBin demonstrating how it works: http://emberjs.jsbin.com/walunokaro/3/edit
I've created a computed property that relies on all records in the store.
I've tried making the property update on adding/removing records with .property('todos.#each.id'), .property('model.#each.id'), .property('#each.id'), .property('#each') and other combinations, no luck so far. :( When i create new records, existing recrods' property would not update.
Here's a fiddle: http://jsbin.com/UDoPajA/211/edit?output
The property is otherTodos on the Todo controller. This property is used by the <select> dropdown list on the page (via {{view Ember.Select}}).
You're out of scope of the collection. You'll need to get access to the todos controller in order to have a computed property based off of its model. needs will handle this use case. http://emberjs.com/guides/controllers/dependencies-between-controllers/
Additionally to make an easy to access alias to the todos controller's model we use computed.alias. http://emberjs.com/api/#method_computed_alias
Todos.TodoController = Ember.ObjectController.extend({
needs:['todos'],
todos: Ember.computed.alias('controllers.todos.model'),
....
foo: function(){
}.property('todos.#each.id')
});
PS note of caution, in your code you are creating multiple instances of Ember Data filter, filter collections are meant to be live collections that are long living and update as records are added/removed from the store. You might just want to grab the model from todos and filter over it instead of creating a new store filter (which then avoids the async code as well, not that that is an issue).
Here's an implementation that would avoid that (no point in using it as a setter, you are only getting from it):
otherTodos: function() {
var model = this.get('model'),
thisId = model.get('id');
var todos = this.get('todos').filter(function (todo) {
return todo.get('id') !== thisId;
});
var selectContent = todos.map( function(todo){
var selectContent = {
title: todo.get('title'),
id: todo.get('id')
};
return selectContent;
});
return selectContent;
}.property('todos.#each.id'),
Here's an updated jsbin of your code: http://jsbin.com/UDoPajA/216/edit
This may be abusing Ember, but I want to create a computed property for the number of items in the store.
I'm trying to prototype a UI that exists entirely client-side. I'm using fixture data with the local storage adapter. That way, I can start off with canned data, but I can also add data and have it persist across reloads.
As I'm currently working on the data layer, I've built a settings route that gives me a UI to reset various models. I would like to add a Handlebars expression like {{modelCount}} so I can see how many records there are in the store. That's quicker than using the Ember Data Chrome extension, which resets to the routes tab on every page reload.
The following will show me the number of records once, but does not change when the number of records changes:
modelCount: function() {
var self = this;
this.store.find("my_model").then(function(records) {
self.set("modelCount", records.get("length"));
});
}.property()
I get that the store is supposed to proxy an API in the real world, and find returns a promise, but that's about the limit of my knowledge. I don't know how tell Ember to that I want to know how many records there are, or if this is even a valid question.
Load the result of store.find into an Ember.ArrayController's content and then bind the length of content to modelCount. An example:
App.SomeRoute = Ember.Route.extend({
model: function(){
return this.store.find('my_model');
}
});
App.SomeController = Ember.ArrayController.extend({
modelCount: Ember.computed.alias('content.length')
});
See a working example in http://jsbin.com/iCuzIJE/1/edit.
I found a workable solution by combining the answer from #panagiotis, and a similar question, How to load multiple models sequentially in Ember JS route.
In my router, I sequentially load my models:
model: function() {
var self = this;
return new Ember.RSVP.Promise(function(resolve, reject) {
self.store.find("model1").then(function(model1) {
self.store.find("model2").then(function(model2) {
self.store.find("model3").then(function(model3) {
resolve({
model1: model1,
model2: model2,
model3: model3
});
});
});
});
});
},
Then in my controller, I define simple computed properties:
model1Count: function() {
return this.get("model1.length");
}.property("model1.length"),
...
I am struggling with the concept Ember.js will like. What I want is the following. I have now an existing Ember Data model called Article. Lets say with the id of 1 will be shown on /article/1.
When the user hit the New button they are transitioned to the 'article.new' route. See my routers:
App.Router.map(function () {
this.resource('article', {path: '/article/:id'});
this.resource('article.new', {path: "/article/new"});
}
When the user click the Duplicate button when they are at /article/1 the duplicateArticle action gets called. I intuitively do the following in App.ArticleController:
duplicateArticle: function () {
return this.transitionToRoute('article.new', this.get('model');
}
However that is not going to work. I think because I need an path in my article.new route. However, when a user click on the New button I do not need an ID.
Is there a valid solution to this question?
Edit: My tries so far:
var currentArticle = this.get('model');
currentArticle.set('id', null);
var duplicatedArticle = this.store.createRecord('article', currentArticle);
duplicatedArticle.save();
and:
var duplicatedArticle = Ember.copy(this.get('model'), true);
and:
var newArticle = JSON.parse(JSON.stringify(this.get('model')));
var duplicatedArticle = this.store.createRecord('article', newArticle);
duplicatedArticle.save();
The last try does work except for belongsTo and hasMany properties.
Is there no Ember way of doing this?
References:
Ember clone model for new record
Is there any way to convert Ember Object into plain javascript object?
Iterating over Ember.js ember-data Record Arrays
How can I clone an Ember Data record, including relationships? (not answered, 75% the same question as me)
.
Update: a simple example with also belongsTo items saved
hasMany does not work. Contribute to this answer if you have a solution!
My final solution without hasMany items is now as follows:
In my actions of my ArticleController:
duplicateArticle: function () {
var article = this.get('model').toJSON(),
self = this;
// todo implement saving hasMany items
// set belongsTo items by hand
article['landcode'] = this.get('landcode');
article['employee'] = this.get('employee');
article['cross_selling_article_relation'] = this.get('cross_selling_article_relation');
var duplicatedArticle = this.store.createRecord('article', article);
// save and transite to newly created article
duplicatedArticle.save().then(function (savedArticle) {
self.transitionToRoute('article', savedArticle.id);
});
},
Now we have a add-on to copy models ember-cli-copyable
With this add on, just add the Copyable mix-in to the target model which is to be copied and use the copy method
Example from the add-on site
import Copyable from 'ember-cli-copyable';
Account = DS.Model.extend( Copyable, {
name: DS.attr('string'),
playlists: DS.hasMany('playList'),
favoriteSong: DS.belongsTo('song')
});
PlayList = DS.Model.extend( Copyable, {
name: DS.attr('string'),
songs: DS.hasMany('song'),
});
//notice how Song does not extend Copyable
Song = DS.Model.extend({
name: DS.attr('string'),
artist: DS.belongsTo('artist'),
});
//now the model can be copied as below
this.get('currentAccount.id') // => 1
this.get('currentAccount.name') // => 'lazybensch'
this.get('currentAccount.playlists.length') // => 5
this.get('currentAccount.playlists.firstObject.id') // => 1
this.get('currentAccount.favoriteSong.id') // => 1
this.get('currentAccount').copy().then(function(copy) {
copy.get('id') // => 2 (differs from currentAccount)
copy.get('name') // => 'lazybensch'
copy.get('playlists.length') // => 5
copy.get('playlists.firstObject.id') // => 6 (differs from currentAccount)
copy.get('favoriteSong.id') // => 1 (the same object as in currentAccount.favoriteSong)
});
Ember Data is in beta, so missing functionality is to be expected, relationships are only resolved from ids when resolved through find.
If you create a dummy id you can pushPayload then find.
W/o relationships, you can use record.toJSON() to get the attributes w/o id, then send it to createRecord.
http://emberjs.jsbin.com/OxIDiVU/13/edit
You should submit a PR with duplicate logic, it would be a great way to contribute to the community.
I have a solution for copying/duplicating an Ember Data record, including its one-to-many relationships.
I have a "duplicate" method:
duplicate: function(oldObject) {
var newObject = oldObject.toJSON();
for (var key in newObject) {
if (newObject[key] != oldObject.get(key)) {
newObject[key] = oldObject.get(key);
}
}
newObject.id = null;
return newObject;
}
And I use this method in an action like this:
actions: {
draft: function() {
var newModel = this.duplicate(this.get('model'));
this.store.createRecord('somemodel', newModel).save();
}
}
What if you nested the "new" route under your edit so you wouldn't need any extra params in the url. Then to "duplicate" it you could reach up to the parent route using this.modelFor('article')
I'm working with a set of data that can potentially have duplicate values. When I initially add the data I'm using what little information I have available on the client (static info stored on the model in memory).
But because I need to fetch the latest each time the handlebars template is shown I also fire off a "findAll" in the computed property to get any new data that might have hit server side since the initial ember app was launched.
During this process I use the "addObjects" method on the ember-data model but when the server side is returned I see duplicate records in the array (assuming it's because they don't have the same clientId)
App.Day = DS.Model.extend({
appointments: function() {
//this will hit a backend server so it's slow
return App.Appointment.find();
}.property(),
slots: function() {
//no need to hit a backend server here so it's fast
return App.Slot.all();
}.property(),
combined: function() {
var apts = this.get('apppointments'),
slots = this.get('slots');
for(var i = 0; i < slots.get('length'); i++) {
var slot = slots.objectAt(i);
var tempApt = App.Appointment.createRecord({start: slot.get('start'), end: slot.get('end')});
apts.addObjects(tempApt);
}
return apts;
}.property()
});
Is it possible to tell an ember-data model what makes it unique so that when the promise is resolved it will know "this already exists in the AdapterPopulatedRecordArray so I'll just update it's value instead of showing it twice"
You can use
DS.RESTAdapter.map('App.Slot', {
primaryKey: 'name-of-attribute'
});
DS.RESTAdapter.map('App.Appointment', {
primaryKey: 'name-of-attribute'
});
But I think it is still impossible because App.Slot and App.Appointment are different model classes, so if they have same ids it won't help. You need to use the same model for both slots and appointments for this to work.
Edit
After examinig the source of ember-data, i think that you can define the primaryKey when you define your classes, like:
App.Slot = DS.Model.extend({
primaryKey: 'myId',
otherField: DS.attr('number')
});
I didn't tested it though..
Edit 2
After further reading seems that the previous edit is no longer supported. You need to use map as i wrote earlier.