getting to ember.js model enumerable property childs - ember.js

I'm trying to get to my models data from a view didInsertElement hook, because I need to trigger some actions on the DOM when the template rendering is completed.
with models like:
App.MyParent = DS.Model.extend({
title: DS.attr('string'),
childs: DS.hasMany('App.MyChild')
});
App.MyChild = DS.Model.extend({
name: DS.attr('string'),
parent: DS.belongsTo('App.MyParent')
});
and objects like:
App.MyParent.FIXTURES = [
{ id: 0, title: "some title", childs: [0,2,3] }
]
App.MyChild.FIXTURES = [
{ id: 0, name: "some name", parent: 0 },
{ id: 2, name: "other name", parent: 0 },
{ id: 3, name: "diff name", parent: 0 }
]
Inside the hook function I am getting to the childs property like this:
var childs = this.get("context.content.childs");
then I get an enumerable with the right number of childs, but the child all have undefined properties.
update
Seems like the only place where I can get to a child with App.MyChild.find(someId) is in the browser console, in my app code I only get objects with undefined properties.
I'm puzzled!

To access the childs property, try something like this:
var childs = this.get("context.content.childs");
Also, the fixture data for associations should not use _id or _ids. So use childs and parent instead:
App.MyParent.FIXTURES = [
{ id: 0, title: "some title", childs: [0,2,3] },
];
App.MyChild.FIXTURES = [
{ id: 0, name: "some name", parent: 0 },
{ id: 2, name: "other name", parent: 0 },
{ id: 3, name: "diff name", parent: 0 },
];
http://jsbin.com/ucanam/316/

Related

Sorting on numerical model attribute in Ember

I've got a very basic Price model that looks like this:
App.Price = DS.Model.extend({
value: DS.attr()
});
App.Price.reopenClass({
FIXTURES: [
{ id: 1, value: 29.99 },
{ id: 2, value: 39.99 },
{ id: 3, value: 49.99 },
{ id: 4, value: 55.99 }
]
});
Here's the route that's using this model:
App.PricingRoute = Ember.Route.extend({
model: function(){
return this.store.find('price');
}
});
In the controller, I set the sorting to be based on the value attribute:
App.PricingController = Ember.ArrayController.extend({
sortProperties: ['value'],
sortAscending: true
});
Then my template (in Jade) where I want them to be display in sorted order:
{{#each price in this}}
li.price-levels__value {{price.value}}
.price-levels__remove("{{action 'delete' price.id}}")
{{/each}}
Problem is they're not sorted. Interesting fact is that if I change the type of the value attribute to strings, the sorting DOES work.
eg.
{ id: 1, value: '29.99' }
{ id: 2, value: '39.99' }
etc.
So how do I get the sorting to work on a numerical model attribute?

Is there any example for reflexive relation?

I am trying iterate json response which more likely mentioned below and I want achieve this model through reflexive relation.
{
folders : [
{
id : 1,
folders [ { id : 1, folders : [] } ]
},
{
id : 2,
folders : [{ id : 1, folders : [ {id:1 , folders : [] }] }]
}
]
}
I here is my try
children: DS.hasMany('folders', {inverse: 'parent'}),
parent: DS.belongsTo('folders', {inverse: 'children'})
But does't work at all . is there any example ?
I have a similar structure for nested categories modeled like this
In my models/category.js
export default DS.Model.extend({
name: DS.attr('string'),
description: DS.attr('string'),
master: DS.belongsTo('category', {inverse: null})
});
Then in my routes/products.js I define the model hook like this
model: function() {
return {
products: this.store.findAll('product'),
categories: this.store.findAll('category')
};
}
From controllers/products.js I have access to categories and their master categories like this
var categories = this.get('model').categories;
for (var i=0; i < categories.get('length'); i++) {
var master = categories.objectAt(i).get('master').get('id');
It seems that ember takes care of everything in the background somehow.

HasMany Polymorphic Relationship In Ember Data

I'm really struggling to understand how polymorphic relationships worm in Ember Data (Beta 11) and cannot find any update information on how to set them up and what is expected in the JSON payload. I'm trying to create a feed of items (think facebook feed) where you have different types of items in the feed. My modeling looks something like the following.
App.Feedable = DS.Model.extend({
activities: DS.hasMany('activity')
});
App.Activity = DS.Model.extend({
feedable: DS.belongsTo('feedable', { polymorphic: true, async: false })
});
App.MemberLikeShare = DS.Model.extend({
status: DS.attr('string')
});
App.PhotoShare = DS.Model.extend({
status: DS.attr('string'),
photo: DS.attr('string')
});
When I do a fetch at /activities I send back JSON that looks like the following:
{
activities: [
{
id: 1,
feedable: { id: 1, type: 'memberLikeShare' }
},
{
id: 4,
feedable: { id: 4, type: 'memberLikeShare' }
},
{
id: 5,
feedable: { id: 5, type: 'photoShare' }
}
],
member_like_shares: [
{
id: 1,
status: 'Foo'
},
{
id: 4,
status: 'Bar'
}
],
photo_shares: [
{id: 5, photo: 'example.jpg'}
]
}
When this runs I get an error like:
You can only add a 'feedable' record to this relationship Error: Assertion Failed: You can only add a 'feedable' record to this relationship
I'm assuming my relationships are wrong or I'm sending the wrong JSON?
polymorphic relationships should extend the base type.
App.Feedable = DS.Model.extend({
activities: DS.hasMany('activity')
});
App.MemberLikeShare = App.Feedable.extend({
status: DS.attr('string')
});
App.PhotoShare = App.Feedable.extend({
status: DS.attr('string'),
photo: DS.attr('string')
});
I'd also expect them to define the activities on them.
member_like_shares: [
{
id: 1,
status: 'Foo',
activites: [1,2,3,4]
},
{
id: 4,
status: 'Bar',
activites: [1,2,3,4]
}
],
photo_shares: [
{
id: 5,
photo: 'example.jpg',
activites: [1,2,3,4]
}
]

How do I create a polymorphic 1:1 relationships wtih Ember Data fixtures?

Page has a polymorphic 1:1 relationship with a model called PageContent. PageContent has two subtypes (TextOnly and Video). I want to be able to able to do a findAll for "page" and get all of the content back. What am I doing wrong?
JSBin
This seems to work: http://jsbin.com/names/1/edit
Only wrong thing I could see is the App.Page.FIXTURES.
It should be:
App.Page.FIXTURES = [
{
id: 1,
title: "Introduction",
pageContent: 1,
pageContentType: "textOnly"
},{
id: 2,
title: "Summary",
pageContent: 1,
pageContentType: "Video"
}
];
or
App.Page.FIXTURES = [
{
id: 1,
title: "Introduction",
pageContent: {
id: 1,
type: "textOnly"
}
},{
id: 2,
title: "Summary",
pageContent: {
id: 1,
type: "Video"
}
}
];

How to select a card in a carousel by menu item in a docked menu list in Sencha touch?

I cannot figure out how I can retrieve a given Data item in a store (id-number) to send it to the "setActiveItem" method in a listener:
So I have a store - model:
Ext.regModel('PictureItem', {
fields: ['id', 'titel', 'url']
});
var pictureItems = new Ext.data.Store({
model: 'PictureItem',
data: [
{id:1, titel:'page 1', url:'http://placekitten.com/1024/768'},
{id:2, titel:'page 2', url:'http://placekitten.com/1024/768'},
{id:3, titel:'page 3', url:'http://placekitten.com/1024/768'},
]
});
Here is my menuList called "leftList":
var leftList = new Ext.List({
dock: 'left',
id:'list1',
width: 135,
overlay: true,
itemTpl: '{titel}',
singleSelect: true,
defaults: {
cls: 'pic'
},
store: pictureItems,
listeners:{
selectionchange: function (model, records) {
if (records[0]) {
Ext.getCmp('karte').setActiveItem(!!!Here the number of the selected Item
or respondend "id" in the data store!!!);
}
}
}
});
and the carousel....
var carousel = new Ext.Carousel({
id: 'karte',
defaults: {
cls: 'card'
},
items: [{
scroll: 'vertical',
title: 'Tab 1',
html: '<img class="orientation" alt="" src="img_winkel/titel_v.jpg">'
},
If I call
Ext.getCmp('karte').setActiveItem(2);
it works with the called card - but how can I get the number from the id of the selected item in the menu List /store????
By the way: what does mean:
if (records[0]) {
why [0]?
I FOUND THE ANSWER FOR MYSELF - IT'S EASY:
Ext.getCmp('karte').setActiveItem(records[0].get('id'), {type: 'slide', direction: 'left'});
The secret to get the record-entry is ".get()":
records[0].get('arrayfield')
So now I can change the activeItem in the carousel easely...