How to reference childview in handlebar?

Question

I have a collection view as follows:

Ember.Widget.ParentView = Ember.CollectionView.extend({

    content: ['childView1', 'childView2'],

    fnameBinding: ChildView1.fname,
    lnameBinding: ChildView1.lname,

    ChildView1: Ember.View.extend({
        templateName: 'ChildView1',

        fname: 'David',
        lname: 'Johnson',
    }),

    ChildView2: Ember.View.extend({
        fnameBinding: '_parentView.fname',
        lnameBinding: '_parentView.lname',
    })
});

If I want to show the name in ChildView1.handlebar, how should I reference the fname? The following does not work:

<script type="text/x-handlebars" name="ChildView1">
{{fname}}{{lname}}
</script>

Thanks for your help!

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

Using CollectionView :

The Ember.CollectionView content should be a collection of objects (see Ember.CollectionView documentation) :

Ember.CollectionView is an Ember.View descendent responsible for managing a collection (an array or array-like object) by maintaing a child view object and associated DOM representation for each item in the array and ensuring that child views and their associated rendered HTML are updated when items in the array are added, removed, or replaced.

You can, for example, create a model App.Name that has a fName and a lName properties (here set to null by default):

App.Name = Ember.Object.extend({
  fName: null,
  lName: null
});

And then create instances of this model :

App.name1 = App.Name.create({fName: 'David', lName: 'Johnson'});
App.name2 = App.Name.create({fName: 'Stack', lName: 'Overflow'});

And finally, display them in a CollectionView:

App.ParentView = Ember.CollectionView.extend({
  content: [App.name1, App.name2],
  itemViewClass: Ember.View.extend({
    template: Ember.Handlebars.compile('firstName: {{content.fName}}, lastName: {{content.lName}}')
  }),
});

You can try it in this fiddle: http://jsfiddle.net/Ev3mR/

Using View:

You could also achieve this like in this fiddle: http://jsfiddle.net/y4FUr/

How to reference childview in handlebar?

1 Answers1