I have been trying to get Ember fixtures data working on a test app I am developing that's based on the ember-rails gem. The data model seems to be loading when I use the Chrome Ember inspector tool but it doesn't load the actual data.
I have the following setup.
router.js
App.Router.map(function() {
this.resource('projects'), { path: '/' };
});
store.js
App.ApplicationAdapter = DS.FixtureAdapter
models/project.js
App.Project = DS.Model.extend({
name: DS.attr('string')
});
App.Project.FIXTURES = [
{ id: 1,
name: 'Test data 1'
},
{ id: 2,
name: 'Test data 2'
}
];
routes/projectsRoute.js
App.ProjectRoute = Ember.Route.extend({
model: function() {
return this.store.find('project');
}
});
As i mentioned this is built on top of rails using the ember-rails gem.
Any help would be much appreciated :)
Instead of adding FIXTURES as a key, it looks like you have to reopen the Model:
App.Project.reopenClass({
FIXTURES: [
{ id: 1,
name: 'Test data 1'
},
{ id: 2,
name: 'Test data 2'
}
]
});
http://emberjs.com/guides/models/the-fixture-adapter/
Related
I am trying to create a dictionary for each record returned in an API call.
my broken code:
import lazyLoading from './lazyLoading'
// get records from api call
created() {
axios.get('http://localhost:8080/api/tools/')
.then(response => {
this.json_data = response.data
console.log(this.json_error)
})
.catch(error => {
console.log(error);
})
export default {
name: 'test',
meta: {
icon: 'fa-android',
expanded: false
},
const children = [];
json_data.forEach(item => {
const dict = {
name: item.name,
path: item.path,
meta: {
label: item.label,
link: item.link,
},
component: lazyLoading('testitem/basic'),
}
children.push(dict);
});
}
desired result:
export default {
name: 'test',
meta: {
icon: 'fa-android',
expanded: false
},
children: [
{
name: 'test',
path: 'test',
meta: {
label: 'test',
link: 'test'
},
component: lazyLoading('test/basic')
},
{
name: 'test',
path: 'test',
meta: {
label: 'test',
link: 'test'
},
component: lazyLoading('test/Basic')
},
{
name: 'test',
path: 'test',
meta: {
label: 'test',
link: 'test'
},
component: lazyLoading('test/Basic')
}
]
(obviously 'test' would be replaced what is returned in the api). The main problem is I don't know how to dynamically create the dictionarys. I also have no idea how to view/troubleshoot my axios request. I assumed console.log would spit out the object into the chrome dev tools under console section but I don't see the object there. I'm completely new to javascript so maybe I'm not looking in the correct spot.
Also I'm getting this error:
Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level
So where do I put my api request if I cannot put it at the top?
I'm new to ng2-smart-tables. I'm trying modify the example below from the GitHub page so that the check boxes don't disappear when moving from page to page.
import { Component } from '#angular/core';
#Component({
selector: 'basic-example-multi-select',
template: `
<ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>
`,
})
export class BasicExampleMultiSelectComponent {
settings = {
selectMode: 'multi',
columns: {
id: {
title: 'ID',
},
name: {
title: 'Full Name',
},
username: {
title: 'User Name',
},
email: {
title: 'Email',
},
},
};
data = [
{
id: 1,
name: 'Leanne Graham',
username: 'Bret',
email: 'Sincere#april.biz',
},
{
id: 2,
name: 'Ervin Howell',
username: 'Antonette',
email: 'Shanna#melissa.tv',
},
{
id: 3,
name: 'Clementine Bauch',
username: 'Samantha',
email: 'Nathan#yesenia.net',
},
{
id: 4,
name: 'Patricia Lebsack',
username: 'Karianne',
email: 'Julianne.OConner#kory.org',
},
{
id: 5,
name: 'Chelsey Dietrich',
username: 'Kamren',
email: 'Lucio_Hettinger#annie.ca',
},
{
id: 6,
name: 'Mrs. Dennis Schulist',
username: 'Leopoldo_Corkery',
email: 'Karley_Dach#jasper.info',
},
{
id: 7,
name: 'Kurtis Weissnat',
username: 'Elwyn.Skiles',
email: 'Telly.Hoeger#billy.biz',
},
{
id: 8,
name: 'Nicholas Runolfsdottir V',
username: 'Maxime_Nienow',
email: 'Sherwood#rosamond.me',
},
{
id: 9,
name: 'Glenna Reichert',
username: 'Delphine',
email: 'Chaim_McDermott#dana.io',
},
{
id: 10,
name: 'Clementina DuBuque',
username: 'Moriah.Stanton',
email: 'Rey.Padberg#karina.biz',
},
{
id: 11,
name: 'Nicholas DuBuque',
username: 'Nicholas.Stanton',
email: 'Rey.Padberg#rosamond.biz',
},
];
}
This uses the selectMode : 'multi'option to show a column with check boxes. The check boxes do show, but every time I use the pagination links to go to another page, the selection is cleared. I'm trying to solve this problem because I have a problem on my project which is analogous to this.
I tried to find documentation on how to persist the selection across pages, but was not successful as only a limited amount of documentation is available. This seems like a feature that's common enough that there should be more information on this out there, but doesn't seem to be the case. Any help on this issue would be greatly appreciated.
I haven't used multi-select with ng2-smart-tables myself, but the documentation mentions
doEmit: boolean - emit event (to refresh the table) or not, default = true
I'm not sure if this will work, but you could try to set this to false.
Create a DataSource from your data and then modify the paginator settings:
source: LocalDataSource;
constructor() {
this.source = new LocalDataSource(this.data);
this.source.setPaging({ doEmit: false });
}
If this doesn't work, you might try adding event-listeners that collect the checked rows on check and re-select them on refresh (or init). Add event callbacks to the table...
<ng2-smart-table [settings]="settings" [source]="source" (rowSelect)="onRowSelect($event)" (userRowSelect)="onUserRowSelect($event)"></ng2-smart-table>
...log the events and see if you get any usable information from there.
onRowSelect(event) {
console.log(event);
}
onUserRowSelect(event) {
console.log(event);
}
If none of this helps, open a new issue on github and hope the developers know an easy way to fix this. :-)
And if that fails too, do what I did and switch to angular/material2. Their documentation sucks, but overall I think it's better than most components out there.
import { LocalDataSource } from 'ng2-smart-table';
settings = {
...
}
data = [
...
]
source: LocalDataSource;
constructor() {
this.source = new LocalDataSource(this.data);
this.source.setPaging(1,10,false);
}
If you want to maintain data along the live of a application, you must save this data in a "persistent way" and use the data saved in the ngOnInit.
In a component, I use ngOnDestroy and a dataService
#Component({
})
export class MyComponent implements OnInit,OnDestroy {}
variable1:number
variable2:number
contructor(private state:MyComponentData)
ngOnInit() {
let data=this.state.Data?data:null;
this.variable1=(data)?data.variable1;
this.variable2=(data)?data.variable2;
}
ngOnDestroy()
{
this.state.Data={
variable1:this.variable1,
variable2:this.variable2
}
}
The service is so easy as
#Injectable()
export class MyComponentData{
Data:any;
}
My serialzer works fine, exept for underscored properties. The sctucture of the JSON from server is:
var services = {
services:[{
id:8,
name:"Codin'",
service_category:{
id:5,
iso_code:"BDT",
prop:"Ohmmmm"
}
},
{
id:7,
name:"PR",
service_category:{
id:2,
iso_code:"SFD",
prop:"Naraya"
}
}]
};
after serialisation the payload looks like this:
var services = {
services:[{
id:8,
name:"Codin'",
service_category:5
},
{
id:7,
name:"PR",
service_category:2
}],
serviceCategories:[{
id:5,
iso_code:"BDT",
prop:"Ohmmmm"
},
{
id:2,
iso_code:"SFD",
prop:"Naraya"
}
]
};
But it in the template i cant access serviceCategory's prop
The models
App.Service = DS.Model.extend({
name: DS.attr('string'),
serviceCategory: DS.belongsTo('serviceCategory')
});
App.ServiceCategory = DS.Model.extend({
iso_code: DS.attr('string'),
prop:DS.attr()
});
Here is the JsBin as usual: http://jsbin.com/OxIDiVU/565
Your json has service_category as the property name in the service.
Easy fix is:
App.Service = DS.Model.extend({
name: DS.attr('string'),
service_category: DS.belongsTo('serviceCategory')
});
and
<td>{{item.service_category.prop}} </td>
http://jsbin.com/OxIDiVU/570/edit
I am very much beginner to Sencha Touch. I want to display a static list to the screen. The code I tried is from sencha docs guides 'using list'. However, blank screen appears when compiled and run. Do I have to add the list to the Viewport? What am I missing? Please help.
My code is:
Ext.application({
launch: function () {
Ext.create('Ext.List', {
store: {
fields: ['name'],
data: [
{ name: 'A' },
{ name: 'B' },
{ name: 'C' },
{ name: 'D' }
]
},
itemTpl: '{name}'
});
}
});
May be this one help you
Ext.create('Ext.List', {
fullscreen: true,
itemTpl: '{title}',
data: [
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' }
]
});
Sorry! My bad. I made it with a little bit of work.
I just did this:
launch: function() {
var list = Ext.Create('Ext.List',{..
.....
.....
itemTpl = '{name}'
});
Ext.Viewport.add(list);
}
I'm trying to implement a minimal emberJs app using fixtures and a one-to-many relation between two models:
App.store = DS.Store.create({
revision: 11,
adapter: 'DS.FixtureAdapter'
});
App.Album = DS.Model.extend({
Name: DS.attr("string"),
Songs: DS.hasMany('App.Song')
});
App.Song = DS.Model.extend({
Name: DS.attr("string"),
Album: DS.belongsTo('App.Album')
});
App.Album.FIXTURES = [
{
id: 1,
Name: 'foo'
},
{
id: 2,
Name: 'bar'
}
];
App.Song.FIXTURES = [
{
id: 1,
Album_id: 1,
Name: "asdf"
},
{
id: 2,
Album_id: 2,
Name: "Test"
}
];
I can access the Album model through the console like this
App.Album.find(1).get('Name') # => foo
Whenever I try access the Songs property trough the relation between album and song I get undefined:
App.Album.find(1).get('Songs').objectAt(0) # undefined
Any hints what I might be doing wrong here?
You haven't defined which Songs an Album has. You need to specify Songs: [1,2,3] in your Album model.
(Quite sure it's Songs, but it may Song_ids.)