Ember js Mixin未编译分组结果

时间:2015-08-23 16:37:21

标签: javascript date ember.js coffeescript ember-data

我使用的是Ember App Kit而不是ember -cli

我从服务器那里得到了一些回复 [{date: '2014-01-15T16:22:16-08:00', message: 'Tidal wave occurred'}, {date: '2014-01-15T05:00:16-08:00', message: 'Tornado destroyed town'}, {date: '2014-01-13T14:22:16-08:00', message: 'Volcanic eruption, likely'}, {date: '2014-01-13T16:24:16-08:00', message: 'Ice shelf calving off completely'}, {date: '2014-01-11T11:27:26-08:00', message: 'Mother-in-law visiting'}]

我正在尝试按日期对其进行分组,以使输出看起来像

`Today
----------
4:22 pm - Tidal wave occurred
5:00 am - Tornado destroyed town

Monday
----------
2:22 pm - Volcanic eruption, likely

这是我的模特app / model

`Model = DS.Model.extend

  date: DS.attr "string"
  message: DS.attr "string"


`export default Model`

这是我的路线--app / routes / test

Route = Ember.Route.extend 

  model: () ->
    return @store.find "my-model"

`export default Route`

这是我按日期分组的混合--app / mixin / groupable-mixin.coffee

  Mixin = Ember.Mixin.create
  group: null
  ungroupedContent: null

  groupedContent: (->
    model = @
    groupedContent = Ember.A([])

    groupCallback = @get('group')
    ungroupedContent = @get('ungroupedContent')

    return groupedContent unless groupCallback
    return groupedContent unless ungroupedContent

    ungroupedContent.forEach (item) ->
      group = groupCallback.call(model, item)
      return unless groupKey = group.get('key')

      foundGroup = groupedContent.findProperty('group.key', groupKey)

      unless foundGroup
        foundGroup = groupedContent.pushObject Ember.ArrayProxy.create
          group: group,
          content: Ember.A([])

      foundGroup.get('content').pushObject(item)

    groupedContent
  ).property('group', 'ungroupedContent.@each')

  `export default Mixin`

这是我的控制器 应用程序/控制器/ test.coffee

    'import GroupMixin from "app/mixins/groupable-mixin" '

Controller = Ember.ArrayController.extend GroupMixin,
  ungroupedContentBinding: 'content' # tell Groupable where your default content is

  # the callback that will be called for every
  # item in your content array -
  # just return the same 'key' to put it in the same group
  group: (activity) ->
    Ember.Object.create
      key: moment.utc(activity.get('date')).format('YYYY-MM-DD') # using momentjs to pluck the day from the date
      description: 'some string describing this group (if you want)'
# Controller = Em.ArrayController.extend()


`export default Controller`

这是我的template-app / templates / test.hbs

{{#each groupedContent}}
  {{group.key}} - {{group.description}}

  {{#each content}}
   {{message}}
  {{/each}}
{{/each}}

然而,当我grunt server时,我得到以下回复

Warning: Error compiling tmp/javascript/app/mixins/groupable-mixin.js Used --force, continuing.

当我做grunt server --force时 我看到以下

enter image description here

我们解决这个问题。我正确使用mixin。我在控制器中正确导入mixin吗?

以及如何对日期进行排序,以便最先显示最新的显示,然后显示较旧的日期。

1 个答案:

答案 0 :(得分:0)

尝试使用反引号而不是单引号作为import语句。

`import GroupMixin from "app/mixins/groupable-mixin"`