帶Ember和Ember-Socket的Socket.IO

Question

我一直在探索，並且找不到任何最新的ember（1.0.0-rc.1）和ember-data（修訂版11）的例子，使用socket.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); 
    }); 
    } 
}); 

這實際上將創建一個新的模型類，它推動對象到控制器，並創建一個新麗，但值不渲染。

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

或在這裏它是專門爲使用store.load將直接加載數據記錄到你的使用情況

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

身份地圖。還有用於加載多條記錄的loadMany。

Answer 2

Ember CLI，ember sockets和coffescript

我只與Ember工作了一個月左右，所以沒有承諾，這是這樣做的最好的方式，但我不得不設立灰燼帶有Socket.io和Ember Data的CLI項目。以下是基於我的工作代碼，但以下內容未經過測試。我認爲你需要的所有東西都是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 - 切記替換nameofproje CT與實際項目名稱

`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進行故障排除。除此之外，您還可以查看數據模型和記錄。