如何在ember.js indexController中为itemController设置实例变量？

Question

我有一个Ember.js页面，其中显示了一个项目表，并显示了其中一个项目的详细信息。控制器如下所示：

CV.IndexController = Ember.ArrayController.extend({
  itemController: "CurrVitae",

  selectedCurrVitae: false,

  actions: {
    selectCurrVitae: function(currVitae) {
      this.set('selectedCurrVitae', currVitae)
    }
  }
});

索引控制器用在这样的模板中：

<div class="container">
  <div class="curr-vitae-list">
    {{#each curr_vitae in controller}}
      <div class="curr-vitae-item row">
        <div class="col-sm-2" {{action selectCurrVitae curr_vitae}}>
          {{curr_vitae.name}}
        </div>
        <div class="col-sm-2">
          <!-- NOTE: This method is defined on the item 
               controller (not the model) so the itemController is 
               available at this point. -->
          {{curr_vitae.createdAtDisplay}}
        </div>
        <div class="col-sm-7">
          <div class="embedded-cell">
            {{curr_vitae.summary}}
          </div>
          <div class="embedded-cell">
            {{curr_vitae.objective}}
          </div>
        </div>
      </div>
    {{/each}}
  </div>
  <div class="curr-vitae-view">
    <h2>Details</h2>

    <!-- EDIT: I have tried setting this 
         as {{#if selectedCurrVitae itemController="currVitae" }}
         to match the way the #each handles item controllers but that did
         not seem to work -->
    {{#if selectedCurrVitae }}

      <!-- NOTE: Down here, however, the item controller is not available 
           so I can't use methods defined on the item controller for the 
           currently selected instance. -->
      {{ partial "cv_index_details" }}
    {{/if}}
  </div>
</div>

问题：我遇到的问题是，在itemController中呈现selectedCurrVitae时，我在索引控制器中设置的cv_index_details不可用。

更多详情：

具体来说，在部分我想重用编辑器组件（取自Noel Rappin的Ember.js书）。因此，如果cv_index_details部分看起来像这样：

<h3 class="selected_cv">{{selectedCurrVitae.name}}</h3>

<div class="row selected_cv_summary">
  <h4>Summary</h4>
  {{block-editor emberObject=selectedCurrVitae propName="summary" action="itemChanged"}}
</div>

<div class="row selected_cv_experiences">
  <h4>Experiences</h4>
  {{#each experience in selectedCurrVitae.experiences itemController="experience"}}
    {{ partial "experience_detail" }}
  {{/each}}
</div>

因此，在此模板中，找不到itemChanged实例的selectedCurrVitae操作。但是，我为block-editor实例使用了相同的experience组件，并且该组件正常工作;找到itemChanged上定义的ExperienceController操作。

Answer 1

selectedCurrVitae在itemController之外，itemController仅在每个项目中应用（在每个项目上，因此名称）。

实现此目的的最简单方法可能是重用项目控制器并使用渲染。

模板

{{#if selectedCurrVitae }}
  {{ render "cv_index_details" }}
{{/if}}

控制器

CV.CvIndexDetailsController = CV.CurrVitaeController.extend();

或者

模板

{{#if selectedCurrVitae }}
  {{ render "currVitae" }}
{{/if}}

视图

CV.CurrVitaeView = Ember.View.extend({
  templateName: 'cv_index_details'
});