ember.js - 使用 emberJS 和 Handlebars 显示来自 promise 的 map

Question

我目前正在努力在 emberJS/handlebars 中显示 map (这对我来说是新的)。

服务器端，我有一个 command.go 文件:

var Actions = map[string]string{
    "EAT": "EAT.",
    "DRINK": "DRNK",
    "SLEEP": "SLP."
}
var Keys = map[string]int{
    "KEY_q": 0,
    "KEY_w": 1,
    "KEY_e": 2,
    ...
}

每个 Action 和键都有一个字符串常量标识符，并关联到一个字符串或整数代码。

我想显示一个 2 列的表格，其中:- 第 1 列显示 Action (如吃、喝、睡……)- 第 2 列显示了一个下拉列表，其中包含可用的键盘键(如 Q、W、E、...)，它们的 int 代码是标签的 id

我有一个 Controller 将这些 map 作为 JSON 对象返回:

ctx.JSON(http.StatusOK, gin.H{
    "actions":      models.Actions,
    "keys": models.Keys,
})

然后我一个emberJS服务，config.js，如下:

commands: computed(function () {
    return this.get('ajax').request('<address>/command').then(result => {
        return result;
    });
}),
commandActions: computed('commands', function() {
    return this.get('commands').then((commands) => {
        return commands.actions;
    });
}),
commandKeys: computed('commands', function() {
    return this.get('commands').then((commands) => {
        return commands.keys;
    });
}),

Controller commands.js如下:

import Ember from 'ember';

const { computed, inject: { service } } = Ember;

export default Ember.Controller.extend({
    config: service(),

    selectedKey: '',

    actions: {
        selectKey(value) {

        },
    }
});

最后在 commands.hbs 中有

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>Actions</th>
        <th>Associated key</th>
      </tr>
    </thead>
    <tbody>
      {{#each-in config.commandActions as |key value|}}
        <tr>
          <td>{{command}}</td>
          <td>
            {{#power-select
            options=config.commandKeys
            selected=selectedKey
            allowClear=false
            searchEnabled=false
            onchange=(action "selectKey")
            as |key|
            }}
              {{key}}
            {{/power-select}}
          </td>
        </tr>
      {{/each-in}}
    </tbody>
  </table>
</div>

但是什么也没有显示:(。该服务运行良好，但随后在 hbs 文件中什么也没有出现。我尝试了每个或每个输入的不同组合，但没有成功。

有人可以帮忙吗？我是否需要以某种方式在 Controller 中设置变量然后在 hbs 中使用这些变量？

我使用的是 ember 2.5。

提前致谢

编辑

问题可能来自于我试图在解决之前显示一个 promise 对象。对此有什么想法吗？

Answer 1

我认为使用 Ember Concurrency，您的服务将暂停，直到您的 promise 解决，然后返回您想要的结果，而不是 #each 不知道如何迭代的 promise 对象。

您的服务代码最终看起来像这样:

commands: task(function*() {
  const allCommands = yield this.get('ajax').request('<address>/command');
  return allCommands;
}),
commandActions: computed.alias('commands.actions'),
commandKeys: computed.alias('commands.commandKeys')

你的模板会再次快乐。