Ember.js 带有余烬和余烬数据的Socket.IO

我一直在四处寻找，找不到任何也使用socket.io的最新的余烬（1.0.0-rc.1）和余烬数据（修订版11）示例。我试过这样的东西

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>

{{#控制器中的每个公寓}

{{{#链接到“公寓”公寓}
{{日期公寓.日期}
{{公寓名称}
{{/linkTo}

{{/每个}}

---

这与运行循环有关吗？如何强制渲染值？或者有更好的方法吗？

有一个非常简单的解决方案，我正在我的一些应用程序中使用。您可以对套接字进行通用回调，也可以接受任何类型的数据

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

。

，以及

我只与Ember合作了大约一个月，因此没有人保证这是最好的方法，但我必须使用Socket.io和Ember数据建立一个Ember CLI项目。以下内容基于我的工作代码，但未经测试。我认为你需要得到的99%的方式都在这里。祝你好运

.jshintrc-如果您不在此处包含Ember套接字，Ember服务将对您大喊大叫

{
  "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;

`import Ember from 'ember'`

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

Router.map ->
    @route 'example'

`export default Router`

router.coffee-记住用实际项目名称替换项目名称

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;

`import Ember from 'ember'`

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

Router.map ->
    @route 'example'

`export default Router`

型号/示例：咖啡

`import DS from 'ember-data'`

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

`export default Example`

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

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

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

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

路线/例如：咖啡

`import DS from 'ember-data'`

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

`export default Example`

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

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

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

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

控制器/example.coffee

`import DS from 'ember-data'`

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

`export default Example`

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

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

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

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

模板/example.coffee

`import DS from 'ember-data'`

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

`export default Example`

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

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

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

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

{{{#示例中的每个示例}
{{example.id}{{example.name}
{{/每个}}
举出例子

---

我会建议您进行故障排除。您还可以查看您的数据模型和记录等。

我们应该使用store.load（应用程序公寓，公寓）还是store.get（'adapter'）.load（应用程序公寓，公寓）。我只是想根据您在中提出的问题和对的响应确定加载数据的方式。在我的理解中我遗漏了什么。谢谢。我在最新的余烬中使用了

store.load（App.Appartment，data）

，效果很好：）如果您有任何问题，请告诉我，github问题已经过时了。这导致了与我相同的问题（只是文档中放置了一条空记录）。您还需要使用

var store=this.get（'store'）来引用
store

@Chad您正在加载的数据看起来如何？

单元：{…}

。它只是对象记录而不是数组记录。