带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进行故障排除。除此之外，您还可以查看数据模型和记录。