Socket.IO с Ember и Ember-данными

Question

Я уже не могу найти какие-либо современные примеры ember (1.0.0-rc.1) и ember-data (версия 11), которые также использование гнездо.io. Я пробовал что-то вроде этого.

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

Это фактически будет создан новый класс модели, он толкает объект контроллера, и создает новый Li, но значения не оказывают.

<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> 

Связано ли это с циклом запуска? Как заставить значения визуализировать? Или есть лучший подход к этому?

Answer 1

Существует очень простое решение, которое я использую в некоторых своих приложениях. Вы можете иметь общую функцию обратного вызова назначения для сокета и принимать любые данные

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

или здесь она специально с учетом ваших прецеденту

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

с использованием store.load будет загружать данные записи непосредственно в тождественное отображение. Для загрузки нескольких записей также есть loadMany.

Answer 2

Ember CLI, ember sockets и coffescript

Я только работал с Эмбер в течение месяца, так что никаких обещаний, что это лучший способ сделать это, но я должен был создать Ember CLI с данными Socket.io и Ember. Ниже приведен мой рабочий код, хотя следующее не проверено. Я думаю, что все, что вам нужно, чтобы получить 99% пути здесь. Удачи!

.jshintrc - угасающий сервис будет кричать на вас, если вы не включили EmberSockets здесь

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

Brocfile.js - Импорт Эмбер Розетки

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 - не забудьте заменить имяпроекта на фактическое название проекта

import Ember from 'ember'; 
import Resolver from 'ember/resolver'; 
import loadInitializers from 'ember/load-initializers'; 

Ember.MODEL_FACTORY_INJECTIONS = true; 

// every controller using ember sockets must be listed here in the controllers array 
var Socket = EmberSockets.extend({ 
    host: 'example.local', 
    port: 8080, 
    controllers: [ 
     'example' 
     // more controllers here 
    ] 
}); 

var App = Ember.Application.extend({ 
    modulePrefix: 'nameofproject', 
    Resolver: Resolver, 
    Socket: Socket 
}); 

loadInitializers(App, 'nameofproject'); 

export default App; 

router.coffee - не забудьте заменить имяofproje кар с именем фактического проекта

`import Ember from 'ember'` 

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

Router.map -> 
    @route 'example' 

`export default Router` 

модели/example.coffee

`import DS from 'ember-data'` 

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

`export default Example` 

маршруты/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` 

Контроллеры/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` 

шаблоны/example.coffee

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

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

Я предлагаю Chrome Ember Inspector для устранения неполадок. Помимо прочего, вы также можете увидеть свои модели данных и записи.