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"
}
}
];
Related
import {Entity, model, property} from '#loopback/repository';
#model()
export class Misc extends Entity {
#property({
type: 'number',
id: true,
generated: true,
})
id?: number;
#property({
type: 'array',
itemType: 'number',
required: true,
})
members: number[];
constructor(data?: Partial<Misc>) {
super(data);
}
}
export interface MiscRelations {
// describe navigational properties here
}
export type MiscWithRelations = Misc & MiscRelations;
Above is the model for misc API. I am using PostgreSQL.
I have inserted data in the table. Result of GET request from this table is as following -
[
{
"id":1,
"members":[
1,
2,
3
]
},
{
"id":2,
"members":[
1,
2,
3,
4,
5
]
},
{
"id":3,
"members":[
10,
20,
30,
40,
50
]
},
{
"id":4,
"members":[
100,
200,
300,
400,
500
]
},
{
"id":5,
"members":[
1,
2,
3,
500,
1000,
5000
]
}
]
I want to get the records who have members with value 1, so I applied a filter like this -
http://localhost:3000/miscs?filter[where][inq][members]=1
But this isn't working. If there is no way to execute such a query then can I do some change in the model to adjust its type such that it can accept CSV values and also can filter those data?
Please help. Thanks in advance!
For the Postgresql connector, use contains, which accepts an array:
?filter[where][contains][members][0]=1
- SAME AS -
{
where: {
contains: [1]
}
}
Finally, I found an answer. Regex can be used to match the record here like this
filter[where][members][regexp]=1,|1]
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]
}
]
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/
I'm trying to create view which loads list using JSONP, but I want to reload the list when user choose a value from selectfield.
My code:
var distance = 50;
Ext.define('MyApp.view.ListUpdate', {
extend: 'Ext.Container', //Ext.navigation.View
xtype: 'listUpdate',
requires: [
'Ext.dataview.List',
'Ext.data.proxy.JsonP',
'Ext.data.Store',
'Ext.field.Select'
],
config: {
style: ' background-color:white;',
layout: 'vbox',
items:
[
{
xtype: 'toolbar',
docked: 'top',
title: 'List update',
minHeight: '60px',
items: [
{
ui: 'back',
xtype: 'button',
id: 'backButton', //taki sam id jak w view.GdzieJestem
text: 'Back',
},
{
minHeight: '60px',
right: '5px',
html: ['<img src="resources/images/myImage.png"/ style="height: 100%; ">',].join(""),
},
],
},
{
xtype: 'fieldset',
title: 'Choose distance',
items: [
{
xtype: 'selectfield',
id: 'selectField',
options: [
{text: '50km', value: 50},
{text: '100km', value: 100},
{text: '150km', value: 150},
{text: '200km', value: 200},
{text: '250km', value: 250},
{text: '300km', value: 300},
{text: '350km', value: 350},
{text: '400km', value: 400},
{text: '450km', value: 450},
{text: '500km', value: 500},
{text: '550km', value: 550},
{text: '600km', value: 600},
],
listeners: {
change: function (select, newValue, oldValue) {
// console.log('change', newValue.data.value);
console.log(Ext.getCmp('selectField').getValue());
distance = Ext.getCmp('selectField').getValue();
} // change
} // listeners
}
]
},
{
xtype: 'list',
style: ' background-color:white;',
itemTpl: '<h2>{company}, {firstName} {lastName}</h2><p> <span style="color:blue;">{city}, {street}, tel: {telephoneNumber}, </span><span style="color:orange;"> odległość: {distance}km</span></p>',
flex: 1,
store: {
autoLoad: true,
fields : ['company', 'firstName', 'lastName', 'city', 'street', 'telephoneNumber', 'distance'],
proxy: {
type: 'jsonp',
url: 'http://192.168.1.15:8080/MyServer/agents/list?userLat='+lat+'&userLon='+lon+'&distance='+distance+'',
reader: {
type: 'json',
rootProperty: 'agents'
}
}
}
}
]
}
});
My second question is: Have you any idea why geolocation works when app runs in Chrome but when it runs on device natively, geolocation doesnt work.
Code:
var lat = 0;
var lon = 0;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function (position) {
console.log(position.coords.latitude);
console.log(position.coords.longitude);
lat = position.coords.latitude;
lon = position.coords.longitude;
//Ext.Viewport.setActiveItem(Ext.create('Proama.view.WyszukajAgenta'));
},
function (error)
{
switch(error.code)
{
case error.TIMEOUT:
alert ('Timeout');
break;
case error.POSITION_UNAVAILABLE:
alert ("Postition unavailable");
break;
case error.PERMISSION_DENIED:
alert ('Permission denied');
break;
case error.UNKNOWN_ERROR:
alert ('Unknown error');
break;
}
}
);
}
else {
alert('Problem with device.');
}
For question 1, I would just reload the list component's store on select change. The way you have this setup you will need to access the list component's store via the list. for example, on change event:
change: function(select, newValue, oldValue){
var items = select.getParent().getParent().getItems(); // access parent's parent's items
var list = items[1]; // list is the second item in the parent's
list.getStore().load(); // reload the list's store
}
Ideally you should abstract the store and register it at the application level (if you are developing in MVC format). With the store abstracted you would be able to call Ext.getStore('MyStore').load(); anywhere in your application.
As for question 2, when you wrap the app in a native shell, in my experience HTML5 geolocation does not work. You will need to make a bridge to the native GPS calls using a tool like PhoneGap (http://docs.phonegap.com/en/1.9.0/cordova_geolocation_geolocation.md.html#Geolocation)
Hope this helps.
I have an ember-data model definition that looks like this:
Sylvius.Filter = DS.Model.extend({
title: DS.attr('string'),
slug: DS.attr('string'),
// Belongs to Atlas
atlas: DS.belongsTo('Sylvius.Atlas'),
// Has images
images: DS.hasMany('Sylvius.Image'),
// May have AtlasExtras
extras: DS.hasMany('Sylvius.AtlasExtra'),
// Structures for this filter
structures: DS.hasMany('Sylvius.Structure'),
// This is the path to the thumbnails sprite.
// Each image will have an index on this sprite
thumbnailUrl: DS.attr('string'),
// How big is each thumbnail?
thumbnailHeight: DS.attr('number'),
thumbnailWidth: DS.attr('number'),
// How big are the images?
imageHeight: DS.attr('number'),
// which image is selected?
selectedImage: DS.belongsTo('Sylvius.Image')
});
I have an ember-data fixture-adapter store set up like this:
Sylvius.fixtureStore = DS.Store.create({
revision: 4,
adapter: DS.fixtureAdapter
});
...and fixtures which look like this:
Sylvius.Filter.FIXTURES = [{
"id": 1,
"title": "Unlabeled",
"slug": "unlabeled",
"thumbnailUrl": "assets/img/surface_anatomy/photographic/srf-photo-unlabeled-tn.gif",
"thumbnailWidth": 100,
"thumbnailHeight": 75,
"atlas_id": 1,
"images": [1, 2, 3, 4, 5, 6, 7],
"structures": [0]
}];
(All this code is in this jsfiddle which demonstrates the problem.)
Here's the issue: the title is accessible just fine. The slug is also there. The thumbnailUrl, thumbnailWidth, thumbnailHeight, are all undefined. Why?
You are not following ember-data's rails centric naming conventions. You can either change your fixture data to:
{
"id": 1,
"title": "Dummy Title",
"slug": "dummy-title",
"thumbnail_url": "path/to/thumbnail.gif",
"thumbnail_width": 100,
"thumbnail_height": 75,
"atlas_id": 1,
"images": [1, 2, 3, 4, 5, 6, 7],
"structures": [0]
}
or change your mapping to include a key:
thumbnailUrl: DS.attr('string', { key: 'thumbnailUrl' }),
thumbnailHeight: DS.attr('number', { key: 'thumbnailHeight' }),
thumbnailWidth: DS.attr('number', { key: 'thumbnailWidth' })