Question

我正在尝试使用嵌套视图创建Ember应用程序。我（基本上）想要三个垂直列。最左边包含一个环境列表。单击某个环境将使用与环境关联的Job对象填充第二个（中心）列，然后单击第二列中的Job时，它将根据作业使用各种详细信息填充第三列。

数据来自Rails api，通过ActiveModel序列化程序，根据需要嵌入ID。

到目前为止，我定义了以下路线：

Skills.Router.map ()->
  this.resource 'environments', ->
    this.resource 'environment', {path: ":environment_id"}, ->
      this.resource 'jobs'

Skills.IndexRoute = Ember.Route.extend
  redirect: ->
    this.transitionTo 'environments'

Skills.EnvironmentsRoute = Ember.Route.extend
  setupController: (controller) -> 
    controller.set('model', this.store.find('environment'))

我的车把应用程序模板：

<div class="container">
    <div class="row">
        {{outlet }}
    </div>
</div>

环境模板

<div id="environments" class="col-sm-4">
    {{#each }}
        {{view Skills.EnvironmentView }}
    {{/each}}
</div>

<div class="col-sm-8">
    {{outlet}}
</div>

环境视图：

Skills.EnvironmentView = Ember.View.extend
    templateName: 'environment'

    click: ->
        # should I be trying to update the Jobs controller here?

环境控制器：

Skills.EnvironmentsController = Ember.ArrayController

模特：

Skills.Environment = DS.Model.extend
  title: DS.attr('string')
  description: DS.attr('string')
  jobs: DS.hasMany('job')

Skills.Job = DS.Model.extend
  title: DS.attr('string')
  environment: DS.belongsTo('environment')

这将在第一列中查找并显示“环境”。如何使用关联中选定的Environments Jobs填充Jobs控制器？

编辑：Binding看起来就像我之前的那样，但我不确定如何将一个控制器的模型/内容属性绑定到另一个控制器的属性？

Answer 1

您应该做的是填充环境模板中的环境列表（不是environments.index模板）。从此列表中选择环境时，它应转换为environment.show路由。在环境资源路由中，它应显示该环境的作业列表。应将此环境模板呈现到环境模板中。然后选择一个作业将转换到作业资源下面的job.show路线。

关键是将保留顶级资源路由，并将后续子路由呈现在其中，在呈现子详细信息时保留资源列表。

Skills.Router.map ()->
  this.resource 'environments', ->
    this.route 'index'
    this.resource 'environment', {path: ":environment_id"}, ->
      this.route 'index'
      this.route 'show'
      this.resource 'jobs'
        this.route 'index'
          this.resource 'job'
            this.route 'show'

如何填充嵌套视图/控制器？

1 个答案: