I'm trying to access a parents view data from a container view, child view with no success.

Here is a fiddler for it.

What is the correct way to do this?

Using: ember-1.0.0-rc.1.js

Javascript code:

App = Ember.Application.create({
    rootElement: '#app',
    name: 'My app',
    ready: function(){
        console.log('ready');
    },
});

App.mod = Ember.Object.extend({
    value: null,

    puted: function(value) {
        return 'puted';
    }.property()
});

App.MyController = Ember.ArrayController.create({
    content: [],
    init: function(){
        // create an instance of the model
        var item = App.mod.create({
            value: 'somevalue'
        });
        this.pushObject(item);
    }
});

App.SecondView = Ember.View.extend({
    tagName: 'span',
    classNames: ['second'],
    template: Ember.Handlebarspile("second view with values: '{{value}}' & '{{puted}}'"),
});

App.FirstView = Ember.View.extend({
    tagName: 'span',
    classNames: ['first'],
    template: Ember.Handlebarspile("first view"),
});

App.ViewsContainer = Ember.ContainerView.create({
    tagName: 'span',
    classNames: ['Container'],
    childViews: ['first_v', 'second_v'],
    first_v: App.FirstView,
    second_v: App.SecondView
});

and the template:

<div id="app">
    <script type="text/x-handlebars">
        Test <b>{{App.name}}</b><br><br>
        {{#each App.MyController.content}}
               this should be printed: "{{value}}" & "{{puted}}"<br><br>
            {{view App.ViewsContainer}}
        {{/each}}
    </script>
</div>

I'm trying to access a parents view data from a container view, child view with no success.

Here is a fiddler for it.

What is the correct way to do this?

Using: ember-1.0.0-rc.1.js

Javascript code:

App = Ember.Application.create({
    rootElement: '#app',
    name: 'My app',
    ready: function(){
        console.log('ready');
    },
});

App.mod = Ember.Object.extend({
    value: null,

    puted: function(value) {
        return 'puted';
    }.property()
});

App.MyController = Ember.ArrayController.create({
    content: [],
    init: function(){
        // create an instance of the model
        var item = App.mod.create({
            value: 'somevalue'
        });
        this.pushObject(item);
    }
});

App.SecondView = Ember.View.extend({
    tagName: 'span',
    classNames: ['second'],
    template: Ember.Handlebars.pile("second view with values: '{{value}}' & '{{puted}}'"),
});

App.FirstView = Ember.View.extend({
    tagName: 'span',
    classNames: ['first'],
    template: Ember.Handlebars.pile("first view"),
});

App.ViewsContainer = Ember.ContainerView.create({
    tagName: 'span',
    classNames: ['Container'],
    childViews: ['first_v', 'second_v'],
    first_v: App.FirstView,
    second_v: App.SecondView
});

and the template:

<div id="app">
    <script type="text/x-handlebars">
        Test <b>{{App.name}}</b><br><br>
        {{#each App.MyController.content}}
               this should be printed: "{{value}}" & "{{puted}}"<br><br>
            {{view App.ViewsContainer}}
        {{/each}}
    </script>
</div>

• javascript
• ember.js

Share Improve this question Follow edited Mar 29, 2013 at 15:09 SimonW asked Mar 29, 2013 at 14:59 SimonWSimonW 6,43344 gold badges3434 silver badges4040 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Interesting what you are trying to do. But I did find a way to acplish it. Here is the Fiddle: http://jsfiddle/Sq2Dt/

You simply must climb the hierarchy of the views and then access the context like this:

{{view.parentView.context.value}} and {{view.parentView.context.puted}}

It does seem kind of strange that the context of the Views inside the ContainerView is the ApplicationController while it's parents view's context is the MyController. Go figure.

Hope that helps :)

Yes, I was stumped on this too. This thread helped me down the path, but in my case, this was the solution.

// I use the #which mand to preserve access to the outer context once inside the #each
{{#with view as myOuterView}}
  {{#each myInnerArray}}
    //here, i get my 'name' property from the *controller* of myOuterView
    {{myOuterView.controller.name}}
    // stuff i did in inner array
  {{/each}
{{/with}

I'm not sure why sometimes, controller is used and other times, seemingly context to access it, but I figured I'd share how mine worked.