ember Uncaught TypeError: undefined is not a function when loading in store

0
votes

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
ember.jswebsocketstore

1 Answers

0
votes

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
        });
    }
});