I'm assuming that the API has changed for how to use adapters but I couldn't find any examples using the fixture adapter. I'm using the new injected store but not sure how to interact with it. I'm just trying to fetch all of the data. Here is a fiddle http://emberjs.jsbin.com/ESoduyA/1/edit.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="https://rawgithub.com/emberjs/starter-kit/v1.0.0/css/normalize.css">
</head>
<body>
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each item in model}}
<li>{{item.type}}</li>
{{/each}}
</ul>
</script>
<script src="https://rawgithub.com/emberjs/starter-kit/v1.0.0/js/libs/jquery-1.9.1.js"></script>
<script src="https://rawgithub.com/emberjs/starter-kit/v1.0.0/js/libs/handlebars-1.0.0.js"></script>
<script src="https://rawgithub.com/emberjs/starter-kit/v1.0.0/js/libs/ember-1.0.0.js"></script>
<script src="http://builds.emberjs.com/beta/ember-data.js"></script>
</body>
</html>
JS
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.get('store').findAll('color');
}
});
App.store = DS.Store.create({
adapter: 'DS.FixtureAdapter'
});
App.Color = DS.Model.extend({
type: DS.attr()
});
App.Color.FIXTURES = [
{type: 'blue'},
{type: 'green'}
];
This results in these errors.
Assertion failed: No model was found for 'html' ember-1.0.0.js:394
DEPRECATION: Action handlers contained in an `events` object are deprecated in favor of putting them in an `actions` object (error on <Ember.Route:ember245>)
at Object.triggerEvent (https://rawgithub.com/emberjs/starter-kit/v1.0.0/js/libs/ember-1.0.0.js:30519:13)
at trigger (https://rawgithub.com/emberjs/starter-kit/v1.0.0/js/libs/ember-1.0.0.js:29641:16)
at handleError (https://rawgithub.com/emberjs/starter-kit/v1.0.0/js/libs/ember-1.0.0.js:29903:9)
at invokeCallback (https://rawgithub.com/emberjs/starter-kit/v1.0.0/js/libs/ember-1.0.0.js:8055:19)
at null.<anonymous> (https://rawgithub.com/emberjs/starter-kit/v1.0.0/js/libs/ember-1.0.0.js:8109:11)
at EventTarget.trigger (https://rawgithub.com/emberjs/starter-kit/v1.0.0/js/libs/ember-1.0.0.js:7878:22)
at https://rawgithub.com/emberjs/starter-kit/v1.0.0/js/libs/ember-1.0.0.js:8180:17
at Object.DeferredActionQueues.flush (https://rawgithub.com/emberjs/starter-kit/v1.0.0/js/libs/ember-1.0.0.js:5459:24)
at Object.Backburner.end (https://rawgithub.com/emberjs/starter-kit/v1.0.0/js/libs/ember-1.0.0.js:5545:27) ember-1.0.0.js:394
Error while loading route:
TypeError
ember-1.0.0.js:394
Uncaught TypeError: Cannot set property 'store' of undefined
Here's some info on the FixtureAdapter. http://emberjs.com/guides/getting-started/using-fixtures/
tl,dr :
App.ApplicationAdapter = DS.FixtureAdapter.extend();
App.Color.FIXTURES = [
{id: 1, type: 'blue'},
{id: 2, type: 'green'}
];
Tweaked bin : http://emberjs.jsbin.com/ESoduyA/4/edit
Related
Nothing handled the action error occurs for the following code. How to resolve this?
I have created a view, an object for my sample app using ember. But the action part is not working.
How to bind an action to a view?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
</head>
<body>
<script type="text/x-handlebars">
<ul class="mod-choosable-list">
{{view Ember.CollectionView
contentBinding="App.teachersController"
itemViewClass="App.TeacherView"
tagName="div"
}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="teacher-view">
<div {{action 'refresh'}}><b>{{view.content.name}}</b></div>
</script>
<script src="js/libs/jquery-v1.11.1.js"></script>
<script src="js/libs/handlebars-v1.3.0.js"></script>
<script src="js/libs/ember-v1.6.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
JS:
App = Ember.Application.create({});
App.Teacher = Ember.ObjectController.extend({
id: null,
name: null,
students: null,
actions: {
refresh: function(){
alert("refresh");
}
}
});
App.TeacherView = Ember.View.extend({
templateName: 'teacher-view'
});
App.set('teachersController', Ember.ArrayController.create({
content: [
App.Teacher.create({id:1, name: "mr.katz", students: [2, 3]}),
App.Teacher.create({id:2, name: "mr.dale", students: [1]})
]
}));
When you trigger the action refresh, ember will look for the action in the controller. Since you have not specified a controller for the view, the controller for the application template will be used which is App.ApplicationController.
You can use the following code and your action will trigger.
App.ApplicationController = Em.Controller.extend({
actions: {
refresh: function(){
alert("refresh");
}
}
});
You can specify the actions in the view too. In that case you will need to specify the target for the action. This will tell ember where to look for the action handler.
App.TeacherView = Ember.View.extend({
templateName: 'teacher-view',
actions: {
refresh: function(){
alert("refresh");
}
}
});
<div {{action 'refresh' target="view"}}><b>{{view.content.name}}</b></div>
You can specify a controller for view on its init event.
App.TeacherView = Ember.View.extend({
templateName: 'teacher-view',
setup:function() {
this.set('controller', App.Teacher.create());
}.on('init')
});
I want to add new record to store using emberdata.Js but not working
Here is my code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ED: Reading" />
<script src="js/jquery-1.10.2.js"></script>
<script src="js/handlebars-1.1.2.js"></script>
<script src="js/ember-1.5.1.js"></script>
<script src="http://builds.emberjs.com/beta/ember-data.prod.js"></script>
<script type="text/javascript">
App = Ember.Application.create();
App.Store = DS.Store.extend({
revision: 12,
url: 'http://localhost/Ember/Demo2/'
});
App.Pull = DS.Model.extend({
title: DS.attr(),
url: DS.attr(),
});
App.Router.map(function(){
this.resource('pull');
});
var store = this.store;
//var obj = App.Pull.createRecord();
App.PullRoute = Ember.Route.extend({
model:
function() {
store.createRecord('pull', {
title: 'Rails is Omakase',
url: 'Lorem ipsum'
});
//return this.store.find('pull');
//return App.Pull.find();
//this.store.createobjects(response);
}
});
</script>
</head>
<body>
<script type="text/x-handlebars">
<h1>Welcome</h1>
<div class="navbar-header">
{{#link-to 'pull' classNames='navbar-brand'}}
City List
{{/link-to}}
</div>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="pull">
<h2>GetAllCityList</h2>
<div class="navbar-header">
<ul>
{{#each model}}
<li>{{title}}</li>
{{/each}}
</ul>
</div>
</script>
</body>
</html>
I am trying to add record to store type of model on calling of model city but this.store is giving me undefined.
below is error in ember insepctor
Error while loading route: TypeError: Cannot read property 'createRecord' of undefined
at App.PullRoute.Ember.Route.extend.model (http://localhost/Ember/Demo2/storedemo.html:42:9)
at superWrapper [as model] (http://localhost/Ember/Demo2/js/ember-1.5.1.js:1292:16)
at Ember.Route.Ember.Object.extend.deserialize (http://localhost/Ember/Demo2/js/ember-1.5.1.js:36570:19)
at http://localhost/Ember/Demo2/js/ember-1.5.1.js:32972:57
at http://localhost/Ember/Demo2/js/ember-1.5.1.js:33464:19
at invokeResolver (http://localhost/Ember/Demo2/js/ember-1.5.1.js:9646:9)
at new Promise (http://localhost/Ember/Demo2/js/ember-1.5.1.js:9632:9)
at Router.async (http://localhost/Ember/Demo2/js/ember-1.5.1.js:33463:16)
at Object.HandlerInfo.runSharedModelHook (http://localhost/Ember/Demo2/js/ember-1.5.1.js:32971:16)
at Object.UnresolvedHandlerInfoByParam.getModel (http://localhost/Ember/Demo2/js/ember-1.5.1.js:33058:19)
>this.store
undefined
Just FYI From Ember models docs:
"The store object is available in controllers and routes using this.store"
I was running into this error because I was attempting to access the store from a component.js file.
Really helpful article on this problem from Josh Farrant here
You might use following way to create your record:
...
var obj = store.createRecord('pull', {
title: 'Rails is Omakase',
url: 'Lorem ipsum'
});
obj.save().then(function(record){
return record;
});
Looks like a scoping issue. You're assigning 'var store = this.store;' in the scope of your application, but Ember.js creates new objects based on your extended definition of Ember.Route and so the scope for 'store' in App.PullRoute may be different than it appears.
Try this:
App.PullRoute = Ember.Route.extend({
model: function() {
this.store.createRecord('pull', {
title: 'Rails is Omakase',
url: 'Lorem ipsum'
});
}
});
I don't see any issue. I did get the store returned when i tried it. I just created a jsbin in case you might want to check.
http://emberjs.jsbin.com/zesemuqe/1/edit
I did find two issues. 1. You sure are trying to create a record which gets it into the store. But you are not returning it.
App.PullRoute = Ember.Route.extend({
model: function() {
return this.store.createRecord('pull', {
title: 'Rails is Omakase',
url: 'Lorem ipsum'
});
}
});
2.Secondly, I can see that you are trying to loop over the model which is not an array and just an object, so handlebars does throw an error on that.
<script type="text/x-handlebars" data-template-name="pull">
<ul>
<li>{{title}}</li>
</ul>
</script>
And I know it surely isn't the issue, but did you load all the dependencies correctly, the jsbin is missing them ?
I'm new with ember and i'm trying to do a websocket that receives JSON data from my golang Server in real time , The problem with my code is that it doesn't seem to be reading the adapter that i have created and so my socket doesn't connect to the server. I think that my code is missing something in application.js or index.html that will allow me to access to my adapter and use its methods!
this is my application.js:
App = Ember.Application.create({
LOG_TRANSITIONS: true
})
/******************************* Post Template **************************************/
//Define a route for the template "post"
App.Router.map(function() {
this.route("post", { path: "/post" });
});
App.PostsRoute = Ember.Route.extend({
model: function() {
return this.store.find("posts");
console.log(post);
}
})
//Post Model
App.Post = DS.Model.extend({
name: DS.attr('string'),
number: DS.attr('string')
});
/**************************** websocket mixin ************************************/
App.WebSocketHandler = Ember.Object.extend({
uri: 'ws://localhost:8081/',
//ws: undefined
initialize: function() {
// this.ws = new WebSocket(this.uri);
var ws = new WebSocket(uri);
// callbacks
this.ws.onopen = function() {
console.log('Connection established /all');
};
this.ws.onclone = function() {
console.log('Connection closed /' + 'all');
};
this.ws.onmessage = function(data) {
DS.get('defaultStore').load(App.Post, data); //Simply load your json in the store.
};
this._super();
}
});
/************************* websocket Adapter ********************************************/
DS.SocketAdapter = DS.RESTAdapter.extend({
socket: undefined,
init: function(){
this.socket = new App.WebSocketHandler();
this._super();
},
find: function (store, type, id) {
// empty block
console.log('find');
},
findAll: function (store, type) {
// empty block
console.log('findAll');
},
createRecord: function(store, type, record) {
// code not relevant
console.log('createRecord');
}
});
App.ApplicationAdapter = DS.SocketAdapter;
// Use the adapter in the store
App.Store = DS.Store.extend({
revision: 12,
adapter: 'SocketAdapter'
});
and my index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Ember.js Example Application</title>
<script src="js/libs/jquery-1.10.2.js"></script>
<script src="js/libs/handlebars-1.1.2.js"></script>
<script src="js/libs/ember-1.5.1.js"></script>
<script src="js/libs/Ember_Data.js"></script>
<script src="js/application.js"></script>
<script src="js/router.js"></script>
<script src="js/models/model.js"></script>
</head>
<body>
<h1>Bonjour </h1>
<script type="text/x-handlebars">
Hello, {{firstName}} {{lastName}}<br/>
<nav>
{{#link-to 'post'}}Post{{/link-to}}
</nav>
<div>
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="index">
<h2>My Wrappers</h2>
<ul>
{{#each post in model}}
<li>{{post.number}}</li>
{{/each}}
</ul>
</script></p>
<script type="text/x-handlebars" data-template-name="post">
<ul>
{{#each post in model}}
<li>Wrapper Name: {{post.name}}</li>
<li>Wrapper Number: {{post.number}}</li>
{{/each}}
</ul>
</script>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
You have some errors in your code.
1) Ember Object uses its own create method.
this.socket = new App.WebSocketHandler();
// change to
this.socket = App.WebSocketHandler.create({});
2) Your route and route template was not correctly named to posts.
this.route("posts", { path: "/posts" });
http://emberjs.jsbin.com/qixur/1/edit
I am trying to feed fixture data to both a handlebars template and a nested view. With my current setup, the data reaches my handlebars template just fine, but not the view. I suspect I am missing some basic piece of the ember.js puzzle. Would someone please advise me?
I've asked a question about a setup that is similar but uses ajax instead of fixture data, but have further simplified my setup in the hopes of getting some direction.
Thank you!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/leaflet.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/x-handlebars">
{{outlet}}
</script>
<script type="text/x-handlebars" id="index">
{{view App.MapView id="map" contentBinding="this"}}
<div id="blog">
<ul>
{{#each}}
<li>{{title}}</li>
{{/each}}
</ul>
</div>
</script>
<script src="js/libs/jquery-1.10.2.js"></script>
<script src="js/libs/handlebars-1.1.2.js"></script>
<script src="js/libs/ember-1.5.0.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/libs/leaflet-src.js"></script>
<script src="js/app.js"></script>
</body>
</html>
window.App = Ember.Application.create();
App.ApplicationAdapter = DS.FixtureAdapter.extend();
App.Router.map(function() {
this.resource('index', { path: '/' });
});
App.IndexRoute = Ember.Route.extend({
model: function () {
return this.store.find('storyPrev');
}
});
App.StoryPrev = DS.Model.extend({
title: DS.attr('string')
});
App.StoryPrev.FIXTURES = [
{
id: 1,
title: 'You Better Believe This!',
coordinates: [-73.989321, 40.6778]
},
{
id: 2,
title: 'Holy Crap, Unreal!',
coordinates: [-73.989321, 40.6779]
},
{
id: 3,
title: 'Big Bucks Made E-Z!',
coordinates: [-73.989321, 40.6780]
}
];
App.MapView = Ember.View.extend({
didInsertElement: function () {
var map = L.map('map', {zoomControl: false}).setView([40.685259, -73.977664], 14);
L.tileLayer('http://{s}.tile.cloudmade.com/[redacted key]/[redacted id]/256/{z}/{x}/{y}.png').addTo(map);
L.marker([40.685259, -73.977664]).addTo(map);
console.log(this.get('content'));
//THIS IS WHERE I GET STUCK
}
});
The view is backed by a controller, so you would do this.get('controller') to get the controller which is backed by your collection which if you wanted to get the collection (which isn't necessary since you can iterate the controller) you could do this.get('controller.model').
var controller = this.get('controller');
controller.forEach(function(item){
console.log(item.get('title'));
});
http://emberjs.jsbin.com/OxIDiVU/373/edit
Ember 1.0.0 RC3 ships with a Starter Kit with quite a simplistic demo to display three colors in a list.
The model data is inserted directly on the IndexRoute like this:
App.IndexRoute = Ember.Route.extend({
model: function() {
return ['red', 'yellow', 'blue'];
}
});
I tried to change this simple demo to use ember-data (Models, Store, ...). However, with no success. The console output of my demo is:
DEBUG: ------------------------------- ember-1.0.0-rc.3.js:349
DEBUG: Ember.VERSION : 1.0.0-rc.3 ember-1.0.0-rc.3.js:349
DEBUG: Handlebars.VERSION : 1.0.0-rc.3 ember-1.0.0-rc.3.js:349
DEBUG: jQuery.VERSION : 1.9.1 ember-1.0.0-rc.3.js:349
DEBUG: ------------------------------- ember-1.0.0-rc.3.js:349
Uncaught TypeError: Cannot call method 'find' of undefined appDemo.js:8
Uncaught Error: assertion failed: an Ember.CollectionView's content must implement Ember.Array. You passed <(generated index controller):ember232> ember-1.0.0-rc.3.js:52
My modified script looks like this:
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: App.Color.find()
});
App.ColorsController = Ember.ArrayController.extend();
// Models
App.Store = DS.Store.extend({
revision: 12,
adapter: 'DS.FixtureAdapter'
});
App.Color = DS.Model.extend({
name: DS.attr('string')
});
App.Color.FIXTURES = [{name: 1}, {name: 2}, {name: 3}, {name: 4}, {name: 5}, {name: 6}];
My html looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each color in controller}}
<li>{{color.name}}</li>
{{/each}}
</ul>
</script>
<script src="js/libs/jquery-1.9.1.js"></script>
<script src="js/libs/handlebars-1.0.0-rc.3.js"></script>
<script src="js/libs/ember-1.0.0-rc.3.js"></script>
<script src="js/libs/ember-data-latest.js"></script>
<script src="js/appDemo.js"></script>
</body>
</html>
What am I doing wrong?
First error lies in
App.IndexRoute = Ember.Route.extend({
model: App.Color.find()
});
You must define the model option as a function like:
App.IndexRoute = Ember.Route.extend({
model: function() {
return App.Color.find();
}
});
The second error I'm a little uncertain on but try this out first.