Question

在我的Ember模板中，我像这样呈现一个任意大小的displayItem数组：

<script type="text/x-handlebars" id="display">
    <h1>{{name}}</h1>
    <hr>
    <div id="display-items">
        {{#each displayItem in displayItems itemController="chart"}}
            {{render "chart" displayItem}}
        {{/each}}
    </div>
</script>

但是，我需要在chart视图呈现之前初始化chart控制器上的一些属性。我知道对于预定义的视图和控制器结构，您可以在setupController上使用route挂钩，但由于这些控制器是动态创建的，我想我可以使用chart控制器的init属性像这样：

...other controller code
init: function() {
    var self = this;

    self._super();

    self.get("views")
    .then(function(views) {
        self.set("currentView", views.objectAt(0));
    });
}
...

但是虽然调用了init挂钩，但调用太晚了 - 视图已经使用未定义的值进行渲染。有没有办法在视图呈现之前设置动态创建的控制器？

Answer 1

您需要做的是在“图表”控制器中创建一个属性，该属性将在显示视图之前观察您需要填充的所有属性。首先，我建议你改变这个：

{{#each displayItem in displayItems itemController="chart"}}
  {{render "chart" displayItem}}
{{/each}}

到此：

{{#each displayItem in displayItems}}
  {{render "chart" displayItem}}
{{/each}}

'render'将为您实例化一个新的charController及其相应的视图。然后，在“chartController”中，添加一个属性，在渲染视图之前监听所需的所有属性：

App.ChartController = Ember.ObjectController.extend({
  isAllInformationComplete: function() {
    return !Ember.isEmpty('property1') && !Ember.isEmpty('property2');
  }.property('property1', 'property2')
});

并在您的视图中，将代码包装在if语句中：

<script type="text/x-handlebars" data-template-name="chart">
  {{#if isAllInformationComplete}}
    All your view html, handlebars, etc...
  {{/if}}
</script>

这里有Fiddle了解详情。

在每个帮助程序中使用Render创建的设置控制器

1 个答案: