如何在不更改模型的情况下向模板添加动态下拉列表？

Question

所以我有一条路线：/tournaments/setup/:tournament_id 在我的 ember 应用程序中，它显示了模型中的各个字段。

但后来我发现我需要同一页面上的其他模型。例如，假设我想要所有玩家的列表，这样我就可以制作一个下拉菜单来选择玩家参加锦标赛。

我可以传递一个对象：

this.transitionTo('tournaments.setup', {tournament: tournament, players: players});

一旦我更改车把模板以反映上下文的变化，它就会起作用。

但是现在URL是错误的。 URL 是 /tournaments/setup/undefined。我确定也有一种方法可以明确处理这个问题，但我不知道它是什么...

...我觉得自己迷路了。有没有更传统的方法来做我正在做的事情？

更新： 我发现我可以通过添加 id:

让 URL 工作

this.transitionTo('tournaments.setup', {id: tournament.id, tournament: tournament, players: players});

但我仍然想知道我这样做是否正确。

Answer 1

你想要做的是在你的路线中加载模型并将它们粘贴在控制器中以供使用。我通常在 beforeModel 挂钩中执行此操作。所以在你的 App.TournamentsSetupRoute 中做这样的事情：

App.TournamentSetupRoute = Ember.Route.extend({
    beforeModel: function() {
         var self = this;
         var players = this.store.find('player');
         players.then(function() {
             self.controllerFor('players').set('model',players);
         });
    }
});

现在，只要输入这条路线，players 就会从您的 API 中获取并存储在控制器中。在您的控制器中，只需将 players 控制器添加到 needs 即可访问它。

App.TournamentSetupController = Ember.ObjectController.extend({
   needs: ['players']
});

您可以通过执行 this.get('controllers.players.model); 访问控制器中任何位置的 players 模型，并在您的模板中迭代它，如下所示：

<select>
   {{#each player in controllers.players.model}}
       <option>{{player.name}}</option>
   {{/each}}
</select>

希望对您有所帮助！我没有测试上面的代码，所以可能有一些错别字，但它应该能帮助你。

如何在不更改模型的情况下向模板添加动态下拉列表？

How to add dynamic dropdown to template without changing model?

ember.js