Ember-cli Fixture loading - ember.js

I'm certain its something small and stupid I'm missing but can't seem to get my fixtures to load. Here is I've got...
app/models/todos.js
import DS from 'ember-data';
var Todo = DS.Model.extend({
title: DS.attr('string'),
isCompleted: DS.attr('boolean')
});
Todo.reopenClass({
FIXTURES: [
{
id: "1",
title: 'install ember-cli',
isCompleted: true
}, {
id: "2",
title: 'install additional dependencies',
isCompleted: true
}, {
id: "3",
title: 'develop amazing things',
isCompleted: false
}
]});
export default Todo;
app/adapters/application.js
import DS from 'ember-data';
export default DS.FixtureAdpater.extend();
app/routes/todos.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.all('todo');
}
});
app/router.js
import Ember from 'ember';
var Router = Ember.Router.extend({
location: TodosENV.locationType
});
Router.map(function() {
this.resource('todos', { path: '/' });
});
export default Router;
Brocfile.js
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp();
app.import({
development: 'vendor/ember-data/ember-data.js',
production: 'vendor/ember-data/ember-data.prod.js'
}, {
'ember-data': [
'default'
]
});
module.exports = app.toTree();
I've been able to push fixture data into the views via the routes with,
this.store.push(todo: {some junk});
but can't figure out what I'm doing wrong in model files.
Any help would be greatly appreciated, Thanks.

This just a guess, but I'm wondering if you need to change this.store.all('todo'); to this.store.find('todo');. I'm pretty sure all() will only return records that are already loaded from the store.

Related

Ember add customEvents

I'm using Ember 2.9 and would like to use the "paste" event.
How I can add paste as an customEvent on start up the application:
This is my current app.js:
import Ember from 'ember';
import Resolver from './resolver';
import loadInitializers from 'ember-load-initializers';
import config from './config/environment';
let App;
Ember.MODEL_FACTORY_INJECTIONS = true;
App = Ember.Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
Resolver
});
loadInitializers(App, config.modulePrefix);
export default App;
I've setup a demo Ember.js 2.9 app at https://github.com/bartocc/stackoverflow-2176861 that demonstrates the code below.
Here's is an example app.js to configure the Ember.js to listen to the paste event:
// /app/app.js
import Ember from 'ember';
import Resolver from './resolver';
import loadInitializers from 'ember-load-initializers';
import config from './config/environment';
let App;
Ember.MODEL_FACTORY_INJECTIONS = true;
App = Ember.Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
Resolver,
// This is how you make your ember app listen the paste event
customEvents: {
paste: 'paste'
}
});
loadInitializers(App, config.modulePrefix);
export default App;
Find more information in the Ember.js 2.9 API.
Then, make any component listen to the paste event with:
import Ember from 'ember';
export default Ember.Component.extend({
paste(event) {
const text = event.originalEvent.clipboardData.getData('Text');
alert(`you've just pasted the text '${text}'`);
}
});

Ember-simple-auth Session Expiring when I refresh the Page

/ app / login / controller.js
import Controller from '#ember/controller';
import { inject } from '#ember/service';
export default Controller.extend({
session: inject('session'),
actions: {
authenticate: function(){
// let _this = this;
let credentials = this.getProperties('identification','password');
let authenticator = 'authenticator:jwt';
this.get('session').authenticate(authenticator, credentials).catch((reason)=>{
// this.set('errorMessage', reason.error || reason);
this.set('errorMessage','Login Failed');
});
}
}
});
/app / profile / controller.js
import Controller from '#ember/controller';
import { inject } from '#ember/service';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
export default Controller.extend(AuthenticatedRouteMixin, {
session: inject('session'),
});
/ config / environment.js
.....
ENV['ember-simple-auth'] = {
authorizer: 'authorizer:custom',
routeAfterAuthentication: '/profiles',
};
....
When I logged in with the necessary credentials it will route to the Profile Route and then when I refresh the page, the session expires,
Suggest a solution,

How can I use DS.RESTAdapter with ember cli?

I created model in models/application.js:
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string')
});
And created adapter in adapters/application.js:
import Ember from "ember";
import DS from 'ember-data';
export default DS.RESTAdapter.extend({
host: 'http://site.work/rest/v1/'
});
Route in routes/application.js:
import Ember from 'ember';
export default Ember.Route.extend({
model: function () {
return this.store.all('application');
});
Template in templates/application.hbs
{{#each item in model}}
<li>{{item.name}}</li>
{{/each}}
app.js
import Ember from 'ember';
import Resolver from 'ember/resolver';
import loadInitializers from 'ember/load-initializers';
Ember.MODEL_FACTORY_INJECTIONS = true;
var App = Ember.Application.extend({
modulePrefix: 'chat', // TODO: loaded via config
Resolver: Resolver
});
loadInitializers(App, 'chat');
export default App;
router.js
import Ember from 'ember';
var Router = Ember.Router.extend({
location: ChatENV.locationType
});
Router.map(function() {
this.route("application");
});
export default Router;
JSON example from the server: {"application":[{"id":"1","name":"qwe"},{"id":"2","name":"qwe2"}]}
But my model is empty and I can't find any xhr requests in developer tool.
How should I use DS.RESTAdapter in Ember Cli?
Note: When I add this line into router it's works:
this.store.push('application',{'id':5, 'name':'Is this a question?'});
I'm not sure if the name of your model (application) is causing weird behaviour, since ember(-cli) also uses this name as root for things such as adapter, route, etc.
Apart from that, I would define my adapter as follows:
import DS from 'ember-data';
export default DS.RESTAdapter.extend({
namespace: 'rest/v1'
});
and then start your server with:
ember server --proxy=http://site.work

How to set rest adapter in ember cli generated model

I am trying to get my ember model to use a remote rails api. I've tried extending DS.RESTAdapter but I don't know how to tell the model to use those settings. My model never reaches out to localhost:3000.
//app.js
import Ember from 'ember';
import Resolver from 'ember/resolver';
import loadInitializers from 'ember/load-initializers';
Ember.MODEL_FACTORY_INJECTIONS = true;
var App = Ember.Application.extend({
modulePrefix: 'friend-ember-app', // TODO: loaded via config
Resolver: Resolver
});
App.ApplicationAdapter = DS.RESTAdapter.extend({
host: 'localhost:3000',
namespace: 'api/v1'
});
loadInitializers(App, 'friend-ember-app');
export default App;
//
//models/event.js
import DS from 'ember-data';
export default DS.Model.extend({
title: DS.attr('string'),
description: DS.attr('string')
});
//
// controllers/index.js
import Ember from 'ember';
export default Ember.Controller.extend({
columns: function(){
//Attempting to see request to remote api
var events = this.store.all('event');
debugger;
return [1,2,3,4];
}.property()
});
The adapter needs to be defined and exported in a separate file in adapters folder
In adapters/application.js
import DS from "ember-data";
var ApplicationAdapter = DS.RESTAdapter.extend({
host: 'localhost:3000',
namespace: 'api/v1'
});
export default ApplicationAdapter;

ExtJs to DJango url query parameters

Ok So this is kinda a long question. I am using ExtJS and Django to create a websiteish. Ive search the internet on how to add query parameters to the url when get an IFrame. So bascily I have this which creates a panel in ExtJS which has an html page with in it. I want to be able to pass a port number with in the url so that when it calls the html it will automaticly have the port number to connect to with vnc. My VNC client is noVNC
var noVNC = Ext.create('Ext.panel.Panel', {
title: "noVNC",
frame: false,
title: false,
width: '100%',
height: '100%',
layout: 'fit',
items: [{
xtype: "component",
autoEl: {
tag: "iframe",
src: "/noVNC"
}
}]
});
At first I thought that I could just do
src: "/noVNC?port=5900"
However, (through research) I realized you have to edit views.py and urls.py
I think i have urls.py correct
from django.conf.urls.defaults import *
urlpatterns = patterns('',
url(r'^$', 'kfe.views.index'),
url(r'^index$', 'kfe.views.index'),
url(r'^noVNC/(?P<port>\d+)/$' , 'kfe.views.noVNC'),
)
But I am not sure how to use the views.py
def noVNC(request):
return render(request, 'noVNC_Auto.html', content_type='text/html')
hope that is enough info. If not just tell me
Thanks
Ok so the way I fixed it was very easily because of my conditions (I did not need any of my arguments in views.py).
So what I did was inside my IFrame html page I did this
window.onload = function () {
con_port = "?port=" + WebUtil.getQueryVar('con_port', null);
and inside ExtJS I did this
var noVNC = Ext.create('Ext.panel.Panel', {
title: "noVNC",
frame: false,
title: false,
width: '100%',
height: '100%',
layout: 'fit',
items: [{
xtype: "component",
autoEl: {
tag: "iframe",
src: "/noVNC?con_port=5901"
}
}]
});
for now I just hard coded in the port number but you can just add your port number to the string like so
src: "/noVNC?con_port=590" + port
views.py
def noVNC(request):
return render(request, 'noVNC_Auto.html', content_type='text/html')
urls.py
urlpatterns = patterns('',
url(r'^$', 'kfe.views.index'),
url(r'^index$', 'kfe.views.index'),
url(r'^noVNC$' , 'kfe.views.noVNC'),