问题
I'm using ember to display data received from my golang server. The data are in JSON form. so I opened a websocket and tried to push the message received in the store but i got this error: Uncaught TypeError: undefined is not a function
this is my app.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" });
});
//Post Model
App.Post = DS.Model.extend({
name: DS.attr('string' ),
number: DS.attr('string')
});
DS.SocketAdapterMixin = Ember.Mixin.create({
uri: 'ws://localhost:8081/',
init: function(){
this.ws = new WebSocket(this.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) {
this.get('store').load(App.Post, data)
console.log(data);
};
this._super();
},
initialize: function() {
console.log('SocketAdapterMixin::initialize');
this._super();
}
});
DS.SocketAdapter = DS.RESTAdapter.extend(DS.SocketAdapterMixin, {
init: function() {
this._super();
console.log('SocketAdapter');
}
});
App.ApplicationAdapter = DS.SocketAdapter.extend({});
// Use the adapter in the store
App.Store = DS.Store.extend({
revision: 13,
adapter: DS.SocketAdapter.create({})
});
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/app.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">
<h2>My Post</h2>
<ul>
<li> Zied</li>
<li> Farah</li>
</ul>
</script>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
I suggest that the problem is in this.get('store'), it prints undefined when i try to print its value.
回答1:
You don't define the store in Ember Data since Ember Data 1.0 beta 1+.
App.Store = DS.Store.extend({
revision: 13,
adapter: DS.SocketAdapter.create({})
});
Just using this will suffice:
App.ApplicationAdapter = DS.SocketAdapter;
The store is passed in to the find functions, if you want you can use it then. Additionally you would be out of scope inside of onmessage, but that's beside the point.
Recommendation
Since your program is two fold I'd recommend creating your adapters/transport layer using dependency injection. Here's a rough draft
Transport
DS.SocketTransport = Ember.Object.extend({
uri: 'ws://localhost:8081/',
type: 'post',
ws: null,
store: null,
init: function(){
var uri = this.get('uri'),
type = this.get('type'),
store = this.get('store'),
ws = new WebSocket(uri);
// callbacks
ws.onopen = function() {
console.log('Connection established /all');
};
ws.onclone = function() {
console.log('Connection closed /' + 'all');
};
ws.onmessage = function(data) {
// if this is random post data, side load
store.load('post', data)
console.log(data);
};
this._super();
}
});
Web Socket Adapter
App.MyWsAdapter = DS.RESTAdapter.extend({
transport: null,
find: function(store, type, id) {
var transport = this.get('transport');
// Do your thing here
return new Ember.RSVP.Promise(function(resolve, reject){
// use the transport here to send a message/get a message, containing
// the json for the type and id mentioned above then use
//resolve(json);
});
},
});
Dependency Injection
App.initializer({
name: "transport",
after:['store'],
initialize: function (container, application) {
var store = container.lookup('store:main'),
postTransport = application.PostTransport.create({store:store, type:'post'});
register("my:postTranspot", postTransport);
application.PostAdapter = App.MyWsAdapter.create({
transport: postTransport
});
}
});
来源：https://stackoverflow.com/questions/23592331/ember-uncaught-typeerror-undefined-is-not-a-function-when-loading-in-store