Question

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

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

我可以传递一个对象：

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

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

但现在网址错了。网址为/tournaments/setup/undefined。我确信有一种方法可以明确地处理这个，但我不知道它是什么......

......我觉得我正在失去道路。是否有更传统的方式来做我正在做的事情？

更新：我发现我可以通过添加ID来获取网址：

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']
});

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

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

希望有所帮助！我没有测试过上面的代码，所以可能会有一些错别字，但它应该有助于你在那里。

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

1 个答案: