控制器上 JS 对象的访问属性

Question

我创建了一个 Ember.JS 应用程序，我在 ApplicationController 上挂了一些属性，这些属性需要在整个应用程序中都可以访问。这些属性之一是按服务器名称（JS 数组）细分的队列（JS 对象）。在我的模板中，我想列出每个数组的项目，但我不确定该怎么做。我读了这个 question 但我不太明白答案。

对于我的代码，我有：

App.ApplicationController = Ember.Controller.extend({
  currentUser: null,
  queuedPlayers: {
    "The Bastion": [],
    "Begeren Colony": [],
    "The Harbinger": [],
    "The Shadowlands": [],
    "Jung Ma": [],
    "The Ebon Hawk": [],
    "Prophecy of the Five": [],
    "Jedi Covenant": []
  }
});

另一个控制器：

App.IndexController = Ember.Controller.extend({
  needs: ['application'],
  currentUser: Ember.computed.alias('controllers.application.currentUser'),
  queuedPlayers: Ember.computed.alias('controllers.application.queuedPlayers'),
  ...

并且在模板中：

{{#each server in servers}}
  <h2>{{server}}</h2>
  {{#each player in queuedPlayers[server]}}
    {{player}}
  {{/each}}
{{/each}}

servers 是服务器数组（与 queuedPlayers 中的属性相匹配）我正在传递给模板以用作 select 列表的内容属性，因此{{server}} 标签呈现良好。然而，queuedPlayers[server] 或 queuedPlayers.get(server) 显然不起作用，因为这不是车把的工作方式，但这是我想要实现的。

我主要是一名 Python 开发人员，所以 JS 对我来说有点陌生，所以我不熟悉它的所有细微差别。

Answer 1

您需要创建一个组件并传入必要的属性才能完成此操作。

{{#each server in servers}}
  <h2>{{server}}</h2>
  {{queued-players collection=queuedPlayers selection=server}}
{{/each}}

排队玩家模板

{{#each player in players}}
  {{player}}
{{/each}}

排队玩家 js

players: function(){
  return this.get('collection')[this.get('selection')];
}.property('collection.[]', 'selection')

控制器上 JS 对象的访问属性

Access Properties of JS Object on Controller

ember.js

handlebars.js

javascript-objects

排队玩家模板

排队玩家 js