Output in multiple parts of the page

问题

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

I have a section of a page where I have some Ember interactions - a user inputs some values and a calculated result is displayed.

I now want to have the calculated result displayed in another part of the page that is outside the defined template, how would I accomplish this?

回答1:

You could bind that property to the application controller and then use it anywhere you want in the application. For example:

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

Now you can use it anywhere within the application you want. Just tell the outlet's controller to need the application controller, then call that property in the template. Like so:

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

In the Foo template:

{{controllers.application.indexResult}}

Or, if you are within the application scope you can just do:

{{indexResult}}

回答2:

One simple and straight forward solution would be:

<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>

回答3:

You can also set up another outlet that can be used to display the "result". You can read more about using outlets in the Ember.js Guides at http://emberjs.com/guides/routing/rendering-a-template/

来源：https://stackoverflow.com/questions/24853897/output-in-multiple-parts-of-the-page

标签

javascript

ember.js