CODEWITHSUNDEEP
ember.js
blueFast
blueFast

Reputation: 44351

How to access the content of a controller based on a property name

I am trying to reuse code in my controllers / templates. In one of my templates, I have the following:

{{#if controllers.nodesIndex.content.isUpdating}}

This is working fine, but makes this template very specific. I want to generalize this. I would like to do somthing like:

{{#if controllers.{{indexController}}.content.isUpdating }}

Where indexController is actually a config parameter in my controller:

indexController : 'nodesIndex',

The syntax used is not working, and I do not know if there is a way to do what I am trying to do.

Another thing I have tried is simply:

{{#if isUpdating}}

And I have defined this as a computed property in the controler. This is the generic setup ("base class"):

getIndexController : function () {
    return this.get('controllers.' + this.indexController);
},
isUpdating      : function () { return this.getIndexController().get('content').isUpdating; }.property(),

But I am unable to tell property() which other properties this computed property depends on, since they are actually configurable, as returned by the getIndexController() function.

Any ideas on how to access the content of a "dynamic" controller?

Upvotes: 1

Views: 81

Answers (3)

blueFast
blueFast

Reputation: 44351

I have implemented this in an indirect way, with an observer:

isUpdatingChanged: function () {
    this.getTopController().set('isUpdating', this.get('content').get('isUpdating'));
}.observes('content.isUpdating'),

Upvotes: 0

Marcio Junior
Marcio Junior

Reputation: 19128

I think that you are going to the wrong way. Ember provide some options to you share templates between controllers.

Here I made a example with partial http://jsfiddle.net/marciojunior/KxM9k/

<script type="text/x-handlebars" data-template-name="application">
    <h1>Partial example</h1>
    {{#linkTo "index"}}Index{{/linkTo}}
    {{#linkTo "other"}}Other{{/linkTo}}
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
  <h2>Index template</h2>
  {{partial "updatingMessage"}}
</script>

<script type="text/x-handlebars" data-template-name="other">
  <h2>Other template</h2>
  {{partial "updatingMessage"}}
</script>

All options avaliable are in that link http://emberjs.com/guides/templates/rendering-with-helpers/

Upvotes: 2

Andre Malan
Andre Malan

Reputation: 2043

Having a property on your controller that is the name of the "dynamic" controller is a good place to start. Why not just make your property depend on that?

getIndexController : function () {
    return this.get('controllers.' + this.indexController);
},
isUpdating : function () { 
  return this.getIndexController().get('content').isUpdating; 
}.property('indexController'),

If you think of "getIndexController" as a helper function then it makes sense. Rolling the two functions together makes it easier to see that the indexController attribute is the only real property that needs to be observed:

isUpdating : function () { 
  return this.get('controllers.' + this.indexController).get('content').isUpdating; 
}.property('indexController'),

Upvotes: 1

Related Questions