So when querying the model which returns a carrierwave hash, I'm getting his.get('pic')
"[object Object]" in Ember. So How do I get into the view?
{"record":{"id":1234,"first_name":"John","gravepic":{"url":"http://c185643.r43.cf1.rackcdn.com/uploads/record/gravepic/13267/IMG_0013.JPG","ios":{"url":"http://c185643.r43.cf1.rackcdn.com/uploads/record/gravepic/13267/ios_IMG_0013.JPG"},"thumb":{"url":"http://c185643.r43.cf1.rackcdn.com/uploads/record/gravepic/13267/thumb_IMG_0013.JPG"},"small":{"url":"http://c185643.r43.cf1.rackcdn.com/uploads/record/gravepic/13267/small_IMG_0013.JPG"},"medium":{"url":"http://c185643.r43.cf1.rackcdn.com/uploads/record/gravepic/13267/medium_IMG_0013.JPG"},"large":{"url":"http://c185643.r43.cf1.rackcdn.com/uploads/record/gravepic/13267/large_IMG_0013.JPG"}},"eulogy":"FATHER","deceased":true,"gender":"male","photos":[{"accuracy":null,"approval":null,"asset_caption":"","asset_name":null,"assetpic":{"url":"http://c185643.r43.cf1.rackcdn.com/uploads/photo/assetpic/270/iccfa_350x200_3.jpg","thumb":{"url":"http://c185643.r43.cf1.rackcdn.com/uploads/photo/assetpic/270/thumb_iccfa_350x200_3.jpg"},"small":{"url":"http://c185643.r43.cf1.rackcdn.com/uploads/photo/assetpic/270/small_iccfa_350x200_3.jpg"},"medium":{"url":"http://c185643.r43.cf1.rackcdn.com/uploads/photo/assetpic/270/medium_iccfa_350x200_3.jpg"},"large":{"url":"http://c185643.r43.cf1.rackcdn.com/uploads/photo/assetpic/270/large_iccfa_350x200_3.jpg"}},"copyright":null,"coredata_id":null,"created_at":"2013-02-09T10:36:13Z","id":270,"ignore":null,"is_approved":true,"latitude":null,"longitude":null,"record_id":"13267","updated_at":"2013-02-09T10:36:13Z","user_id":1},{"accuracy":null,"approval":null,"asset_caption":null,"asset_name":null,"assetpic":{"url":null,"thumb":{"url":null},"small":{"url":null},"medium":{"url":null},"large":{"url":null}},"copyright":null,"coredata_id":null,"created_at":null,"id":null,"ignore":null,"is_approved":true,"latitude":null,"longitude":null,"record_id":13267,"updated_at":null,"user_id":null}],"copies":[{"content":null,"created_at":null,"id":null,"is_approved":true,"name":null,"record_id":13267,"summary":null,"updated_at":null,"user_id":null}],}}
The next questions will be something like record.photos.first.medium.
Or record.gravepic.small
Just not sure how to get to something beyond "object object"
I'm not sure if this is still the exact API, but if you want multiple values out of the hash I suggest adding a new DS.attr type.
DS.RESTAdapter.registerTransform('json', {
deserialize: function(serialized) {
return Em.isNone(serialized) ? {} : serialized;
},
serialize: function(deserialized) {
return Em.isNone(deserialized) ? {} : deserialized;
}
})
App.Something = DS.Model.extend({
gravepic: DS.attr("json")
})
Related
Hy and thanks for reading :
I have an issue with Ember.ArrayController and arrangedContent. The senario is as follow :
Items inside my arrayController can be modified by some actions.
My arrangedContent is filtred on some of those items properties.
Thus if an observed item property change the arrangedContent property should be refreshed
I achieve this by setting the property() of my arrangedContent with "content.#each.myproperty"
All works fine, except if i try to refresh the model from the route i then get an error message TypeError: Cannot read property 'destroy' of undefined
at ContainerView.extend.arrayWillChange
In some case it would work but duplicate the content every time the refresh() is triggered
with some minimal code it may become more clear ...
App.IndexRoute = Ember.Route.extend({
model : function(){
return [App.Cars.create({color : "red", model : "march"}),
App.Cars.create({color : "yellow", model : "alto"}),
App.Cars.create({color : "blue", model : "gundam"}) ];
},
actions : {
reload : function(){
this.refresh();
}
}
});
App.IndexController = Ember.ArrayController.extend({
arrangedContent : function(){
var data= this.get("content");
data=data.filter(function(elem){
return elem.get("color").match(new RegExp("el","gi"))!==null;
});
return data;
}.property("lenght","content.#each.color"),
actions : {
allYell :function(){
this.get("content").forEach(function(elem){
elem.set("color","yellow");
});
},
erase : function(){
if(this.get("length")>0){
this.get("content").removeAt(0);
}
}
}
});
a JSBin can be found here http://jsbin.com/yebopobetu/3/edit?html,js,console,output
I've never seen anyone recommend overriding arrangedContent. I honestly wouldn't recommend it.
App.IndexController = Ember.ArrayController.extend({
foos : function(){
var data= this.get("model");
return data.filter(function(elem){
return elem.get("color").match(new RegExp("el","gi"))!==null;
});
}.property("#each.color"),
actions : {
allYell :function(){
this.forEach(function(elem){
elem.set("color","yellow");
});
},
erase : function(){
if(this.get("length")>0){
this.removeAt(0);
}
}
}
});
http://jsbin.com/sivugecunu/1/edit
How can I let ember know that I want it to uniquely find records by the slug instead of id .
In my route model I can do something like this
model: function(params) {
return this.store.find('anime', params.anime_slug);
},
serialize: function(anime) {
return { anime_slug: anime.get('anime_slug') };
},
but whenever I call something like model.reload() it tries to reload with the record's id and not the record's slug. So how do I let ember know to uniquely identify the record use anime_slug and not id.
You're almost there!
Route:
App.AnimeRoute = Em.Route.extend({
model: function(params) {
return this.store.find('anime', { anime_slug: params.anime_slug }).then(function(results) {
return results.objectAt(0);
});
},
serialize: function(model) {
return { anime_slug: model.get('anime_slug') };
},
});
Note the change to the model method.
Router:
App.Router.map(function() {
this.resource('anime', { path: '/anime/:anime_slug' });
});
ember rc1, ember-data rev 12. all my other routes load correctly, unsure why i'm seeing this error. it happens when i try to access the show route i.e. /files/groups/5. the index route renders fine.
i've pasted the stack trace below but it's not very informative. is there something basically wrong i'm doing here?
my routes/controllers are set up as follows:
this.resource('files', { path : '/files' }, function() {
this.resource('groups', { path : '/groups' }, function() {
this.route('show', { path : '/:asset_link_group_id' });
});
});
AssetLinksApp.GroupsShowController = Ember.ArrayController.extend({
content : Ember.A(),
assetLinkGroup : null
});
AssetLinksApp.GroupsShowRoute = AssetLinksApp.AuthRequiredRoute.extend({
setupController : function(controller,model) {
controller.set('content',model.get('asset_links'));
controller.set('assetLinkGroup',model);
},
model : function(params) {
return AssetLinksApp.AssetLinkGroup.find(params.asset_link_group_id);
}
});
the stack trace:
Error while loading route: TypeError {} exchange_vendor.js:12078
(anonymous function) exchange_vendor.js:12078
Ember.Router.reopenClass.defaultFailureHandler.setup
exchange_vendor.js:35011 failure exchange_vendor.js:34448
objects.concat.context exchange_vendor.js:34497 invokeCallback
exchange_vendor.js:17846 Promise.then exchange_vendor.js:17893
EventTarget.trigger exchange_vendor.js:17822 results
exchange_vendor.js:17924 RunLoop._prev exchange_vendor.js:15911
Ember.handleErrors exchange_vendor.js:12140 invoke
exchange_vendor.js:15909 iter exchange_vendor.js:15981 RunLoop.flush
exchange_vendor.js:16035 RunLoop.end exchange_vendor.js:15940 tryable
exchange_vendor.js:16143 Ember.tryFinally exchange_vendor.js:12831
Ember.run.end exchange_vendor.js:16146 Ember.tryFinally
exchange_vendor.js:12833 Ember.run exchange_vendor.js:16102
Ember.HashLocation.Ember.Object.extend.onUpdateURL
exchange_vendor.js:36690 jQuery.event.dispatch exchange_vendor.js:3144
jQuery.event.add.elemData.handle.eventHandle
The model returns a single record. However you have defined an ArrayController.
Ember.js automatically places the model in the controller's content property, which will cause an error since it will be putting a single record in an array controller.
Even though you overrode the setupController, before it fires, Ember.js will place the model in the controller anyway. There's currently no way of stopping that.
Update 3-June-2014 (Ember > 1.0) :
If you now override setupController Ember no longer sets the model property.
The only solution I can think of is to add a resource to your routes:
this.resource('files', { path : '/files' }, function() {
this.resource('groups', { path : '/groups' }, function() {
this.resource('group', { path : '/:asset_link_group_id' }, function() {
this.route('index');
});
});
});
This means that you have an object controller (GroupController) containing the group,
and an array controller (GroupIndexController) containing the asset links array.
AssetLinksApp.GroupIndexController = Ember.ArrayController.extend({
assetLinkGroup : null
});
AssetLinksApp.GroupIndexRoute = AssetLinksApp.AuthRequiredRoute.extend({
setupController : function(controller,model) {
controller.set('content',model);
controller.set('assetLinkGroup', this.modelFor('group'));
},
model : function(params) {
return this.modelFor('group').get('asset_links');
}
});
Now your template should be named group/index instead of groups/show. As for group template, it can be an empty template containing {{outlet}}.
Most important thing to note from this is: If your controller is an object controller, you have to return an object from the model hook, and if your controller is an array controller, then you have to return an array from the model hook.
The bright side is, this pushes you to follow a certain design that I and probably the core team think is better.
Here is my transformer:
DS.attr.transforms.category = {
from: function(serialized) {
return OO.Category.create({
tag: serialized
});
},
to: function(deserialized) {
return deserialized.get('tag');
}
}
And my model:
OO.Event = DS.Model.extend({
category: DS.attr('category', { key: 'tag' })
}
When I bring up the form for creating an OO.Event, I create a "blank" OO.Event and bind the form element to the OO.Event's properties. The transformer is called when the blank OO.Event is created, but it is not called again when the tag property of the OO.Category changes (due to bindings.) Because of this, in the JSON representation of the record, "tag" is always null!
What should I do? Thanks for your help!
I have a basic ember-data model object:
App.Group = DS.Model.extend({
//attributes
});
I have json which is structured like this:
root.levelone.leveltwo.property
I don't want to map this project as is but would like to map property in the json to property in the model like this:
App.Group = DS.Model.extend({
property: DS.attr('string')
});
Is it possible to define a mapping that is different from the incoming json? I don't have much control on what is coming from the server.
If this is not possible with ember-data, what is the best way to model this deep nesting?
FYI, the latest version of Ember (v.10) requires custom transforms to be defined on the DS.JSONTransforms object. And the 'to' and 'from' properties have been renamed to 'serialize' and 'deserialize'.
I'm not sure quite what you're asking but you can define custom DS.attr transforms.
Something like this maybe? Haven't tested it.
DS.attr.transforms.deepNest = {
from: function(serialized) {
return this.root2.property
},
to: function(deserialized) {
return { root2: property }
}
}
property: DS.attr('deepNest', {key: 'root1'})
IT changed FROM THIS:
DS.attr.transforms.object = {
from: function(serialized) {
return Em.none(serialized) ? {} : serialized;
},
to: function(deserialized) {
return Em.none(deserialized) ? {} : deserialized;
}
}
TO THIS:
DS.RESTAdapter.registerTransform('object', {
fromJSON: function(serialized) {
return Em.none(serialized) ? {} : serialized;
},
toJSON: function(deserialized) {
return Em.none(deserialized) ? {} : deserialized;
}
})
Ember data v 1.0 beta 2 requires this approach:
CustomTransform = DS.Transform.extend({
deserialize: function(serialized) {
...
},
serialize: function(deserialized) {
...
}
});
Ember.Application.initializer({
name: "customTransforms",
initialize: function(container, application) {
application.register('transform:custom', CustomTransform);
}
});