ember.js - aserrado Unkeught TypeError: undefined no es una función cuando se carga en la tienda
websocket store (1)
Estoy usando Ember para mostrar los datos recibidos de mi servidor de Golang. Los datos están en formato JSON. así que abrí un websocket e intenté enviar el mensaje recibido en la tienda, pero recibí este error: UnEught TypeError: undefined no es una función
esta es mi 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({})
});
y mi 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>
Sugiero que el problema está en this.get (''store''), se imprime indefinido cuando intento imprimir su valor.
No define la tienda en Ember Data desde Ember Data 1.0 beta 1+.
App.Store = DS.Store.extend ({revision: 13, adaptador: DS.SocketAdapter.create ({})});
Solo usar esto será suficiente:
App.ApplicationAdapter = DS.SocketAdapter;
La tienda se transfiere a las funciones de find , si lo desea, puede usarla en ese momento. Además, estarás fuera del alcance dentro de un onmessage , pero eso no onmessage al caso.
Recomendación
Como su programa es doble, recomiendo crear sus adaptadores / capa de transporte mediante la inyección de dependencia. Aquí hay un borrador
Transporte
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();
}
});
Adaptador de enchufe web
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);
});
},
});
Inyección de dependencia
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
});
}
});