Question

我目前正在努力在emberJS /把手中显示地图（这对我来说很新）。

服务器端，我有一个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,
    ...
}

每个操作和键都有一个字符串常量标识符，并与字符串或int代码相关联。

我想显示一个2列表，其中： - 第1列显示行动（如吃，喝，睡觉......） - 第2列显示了一个带有可用键盘键的下拉列表（如Q，W，E，...），它们的int代码是标签的id

我有一个控制器将这些映射作为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;
    });
}),

控制器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文件中没有任何显示。我尝试了每种或每种不同的组合，但没有成功。

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

我使用的是ember 2.5。

提前致谢

修改

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

Answer 1

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

您的服务代码最终会如下所示：

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

你的模板会再次开心。

Answer 2

谢谢大家的帮助。

我们最终通过以下方式获得了我们想要的东西：

在config.js服务中：

SELECT

在command.js控制器中：

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

获取密钥的代码相同。

在commands.hbs中：

import DS from 'ember-data';

actions: computed(function() {
    return DS.PromiseArray.create({
        promise: this.get('config.commands').then((allCommands) => {
            let result = [];
            let actions = allCommands['actions'];

            for (var name in actions) {
                let cmd = Ember.Object.create({
                    'name': name,
                    'code': actions[name],
                });

                result.pushObject(cmd);
            }

            return result;
        })
    });
}),

再次感谢

使用emberJS和把手显示承诺的地图

2 个答案: