CODEWITHSUNDEEP
javascriptember.jsember-data
user1156168
user1156168

Reputation: 956

live update view in ember

I build application using web-socket and I want dynamically change view

I have code in my model:

model: function () {
    var store = this.store;
    var socket = new_socket();

    socket.on('message', function (message) {
        store.push('record',message);
    });
   return store.find('consultation');
}

And data successfully loading into ember store, but ember doesn't update view.

What I need to do?

For example when I use save all works fine:

var record = this.store.createRecord('record',{});
record.save()

UPDATE:

I found this solution:, but it's also not working

My controller (consultation.js):

export default Ember.ObjectController.extend({
    needs: ['application'],
    records: function() {
        console.log(this.get('store'));
        return this.get('store').filter('record', function(record) {
            console.log(record);
        });
    }.property('records'),

Template:

{{#each item in controller.records}}

{{/each}}

Model consultation looks like this (with hasMany field):

export default DS.Model.extend({
    records: DS.hasMany('record', { async: true }),
});

Second console.log is not printing,

I solved it like this

var obj = store.push('record', jsonObj.message); this.controllerFor('consultation').get('records').pushObject(obj);

But it's looks like not good. In which way I can make auto synchronization between model and controller

Upvotes: 0

Views: 267

Answers (1)

Hrishi
Hrishi

Reputation: 7138

You have computed properties that are dependent on themselves in your controller. Also, you really should not be pushing anything to the store, conceptually, when you receive something on your socket, your model changed, you want to capture that notion in your code, so you really should be updating the model when you get a socket message. The way I would do this would be to do something like the following:

in the router,

model: function() {
  var records = this.store.find('consultation',{});
  var socket = new_socket();
  socket.on('message', function (message) {
    records.pushObject(message);
  });
 return records;
}

The controller does not need to have any computed properties at all. and in the template, the code would just be:

{{#each content}}
  //do something here
{{/each}}

I'm a little confused about your use of consultation and record in the code.

Upvotes: 1

Related Questions