Question

index.html：

<div id="section_a">
  <script type="text/x-handlebars" data-template-name="index">
    First value: {{input type="text" value=one}}<br>
    Second value: {{input type="text" value=two}}<br>
    Result: {{result}}
  </script>
</div>
<div id="section_b">    
  <!-- Display {{result}} here aswell -->
</div>

application.js

App.IndexController = Ember.ObjectController.extend({
  one: 0,
  two: 0,
  result: function() {
    return this.get('one') + this.get('two');
  }.property('one', 'two')
});

我有一个页面的一部分，我有一些Ember交互 - 用户输入一些值，并显示计算结果。

我现在想要将计算结果显示在页面的另一部分中，该部分位于定义的模板之外，我将如何实现这一目标？

Answer 1

您可以将该属性绑定到应用程序控制器，然后在应用程序中的任何位置使用它。例如：

App.ApplicationController = Ember.ObjectController.extend({
  needs: ['index'],
  indexResult: Ember.computed.alias('controllers.index.result')
});

现在，您可以在所需的应用程序中的任何位置使用它。只需告诉插座的控制器需要应用程序控制器，然后在模板中调用该属性。像这样：

App.FooController = Ember.ArrayController.extend({
  needs: ['application'],
  //...
});

在Foo模板中：

{{controllers.application.indexResult}}

或者，如果您在应用程序范围内，您可以这样做：

{{indexResult}}

Answer 2

一个简单直接的解决方案是：

<script type="text/x-handlebars" data-template-name="index">

<div id="section_a">
    First value: {{input type="text" value=one}}<br>
    Second value: {{input type="text" value=two}}<br>
    Result: {{result}}
</div>
<div id="section_b">    
  <!-- Display {{result}} here aswell -->
</div>

</script>

Answer 3

您还可以设置另一个可用于显示＆＃34;结果＆＃34;的插座。您可以在http://emberjs.com/guides/routing/rendering-a-template/

的Ember.js指南中阅读有关使用插座的更多信息

输出页面的多个部分

3 个答案: