Socket.IO mit Ember und Ember-Daten

Question

Ich habe herum gestochert und ich finde auch keine aktuellen Beispiele von ember (1.0.0-rc.1) und ember-data (Revision 11) Verwenden Sie socket.io. Ich habe so etwas probiert.

App.ApplicationRoute = Ember.Route.extend({ 
    setupController: function(controller, data) { 
    var socket = io.connect(), 
     self = this; 
    socket.on('apartment/new', function(apartment) { 
     var apt = App.Apartment.createRecord(apartment); 
     self.controllerFor('apartments').pushObject(apt); 
    }); 
    } 
}); 

Dies wird tatsächlich eine neue Modellklasse erstellen, schiebt er das Objekt an die Steuerung, und erstellt eine neue li aber die Werte machen nicht.

<ul class="list-view"> 
{{#each apartment in controller}} 
    <li> 
     {{#linkTo 'apartment' apartment }} 
     <span class="date">{{date apartment.date}}</span> 
     {{apartment.title}} 
     {{/linkTo}} 
    </li> 
{{/each}} 
</ul> 

Hat das etwas mit der Laufschleife zu tun? Wie erzwingen Sie die Werte zu rendern? Oder gibt es einen besseren Ansatz dafür?

Answer 1

Es gibt eine sehr einfache Lösung, die ich in einigen meiner Apps verwende. Sie können entweder einen Allzweck-Rückruf für den Sockel haben und jede Art von Daten

callback: function(message) { 
    // this is better than just `eval` 
    var type = Ember.get(Ember.lookup, message.type); 
    store.load(type, message.data); 
} 

akzeptieren oder es hier speziell auf Ihren Anwendungsfall zugeschnittene

socket.on('apartment/new', function(apartment) { 
    store.load(App.Apartment, apartment); 
}); 

store.load verwendet, wird der Aufzeichnungsdaten geladen werden direkt in die Identitätskarte. Es gibt auch loadMany zum Laden mehrerer Datensätze.

Answer 2

Ember CLI, ember sockets und coffescript

Ich habe mit Ember erst seit etwa einem Monat arbeiten, so dass keine Versprechungen, dass dies der beste Weg, dies zu tun, aber ich habe einen Ember einzurichten CLI-Projekt mit Socket.io und Ember Data. Das Folgende basiert auf meinem Arbeitscode, obwohl das Folgende nicht getestet wird. Ich denke, alles, was Sie brauchen, um 99% des Weges zu bekommen, ist hier. Viel Glück bei der Fehlersuche!

.jshintrc - Ember Service wird bei Ihnen schreien, wenn Sie EmberSockets nicht enthalten hier

{ 
    "predef": { 
    "document": true, 
    "window": true, 
    "nameofprojectENV": true, 
    "EmberSockets": true 
    }, 
    ... 
} 

Brocfile.js - Import Ember Sockets

var EmberApp = require('ember-cli/lib/broccoli/ember-app'); 

var app = new EmberApp(); 

// change this path to where ember-sockets.js is 
app.import('vendor/ember-sockets/package/ember-sockets.js'); 

module.exports = app.toTree(); 

app.js - denken Sie daran, Ersetzen Sie nameofproject durch den tatsächlichen Projektnamen

router.coffee - denken Sie daran, nameofproje zu ersetzen ct mit aktuellen Projektnamen

`import Ember from 'ember'` 

Router = Ember.Router.extend 
    location: nameofprojectENV.locationType 

Router.map -> 
    @route 'example' 

`export default Router` 

models/example.coffee

`import DS from 'ember-data'` 

Example = DS.Model.extend 
    name: DS.attr('string') 

`export default Example` 

Routen/example.coffee

`import Ember from 'ember'` 

ExampleRoute = Ember.Route.extend 
    # set model to be all example records 
    model: -> 
     @store.all('example') 

    setupController: (controller, model) -> 
     controller.set('model', model) 

`export default ExampleRoute` 

Controller/example.coffee

`import Ember from 'ember'` 

ExampleController = Ember.Controller.extend 

#### properties 

examples: (-> 
    # @get('content') gets the model, which in this case, is example (set in route) 
    @get('content') 
).property('content') # watching the model like this might not be right? 

#### methods 
getExamples: -> 
    @socket.emit 'pub', 
     # whatever data you need to pass to the server 
     data : {examples: true} 
     # name of the event you want the data returned on 
     event: "getExamples" 

#### sockets 
sockets: 
    # returns examples from server 
    getExamples: (data) -> 
     # log the data for fun, also to see that you are getting data back 
     console.log data 
     # set controller to @, which is the same as this. 
     controller = @ 

     # get your array of examples from JSON returned from server 
     examples = data.examples 

     examples.forEach (example) -> 
      # controller instead of @, or it doesn't work 
      controller.store.push 'example', 
       # you need ids or this will not work 
       id: example.id 
       name: example.name 

`export default ExampleController` 

templates/Beispiel.Kaffee

{{#each example in examples}} 
    {{example.id}} {{example.name}} 
{{/each}} 

<button {{action getExamples}}>Get Examples</button> 

Ich würde vorschlagen, die Chrome Ember Inspector für die Fehlersuche. Sie können unter anderem auch Ihre Datenmodelle und Datensätze sehen.