ember containerView as a property

Question

I want to reference a containerview as a property of a parentview.

For example, in the parentView's template, I want to define the containerView like this:

<a {{action toggleForm target="view"}} class="btn btn-primary" href="#">Create</a>
{{view view.formContainer}}

And then I want to be able to change the currentView of the containerView in the parentView like this:

  toggleForm: (e) ->
    e.stopPropagation()

    @get('formContainer').set('currentView', Em.View.create())

But the problem being is that he formContainer property references the class and not the instance.

I can access it like this from the childViews collection:

formContainer = @get('childViews.firstObject')

But obviously, if the view stops being the firstObject then my code breaks.

How can I reference the instance without going through the childViews collection or is this possible like this?

Mike Grassotti Mike Grassotti · Accepted Answer · 2013-01-08T17:39:08

You were on the right track. Problem is that you are trying to use the formContainer property (which has apparently been set to a view class) as a reference to a view instance.

If you want to access an instance of your view from the parent, you need to use the view helper's viewName property. See http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_view for detail.

<a {{action toggleForm target="view"}} class="btn btn-primary" href="#">Create</a>
{{view view.formContainer viewName="formContainerViewName"}}

You can use this name to reference the view from it's parent and you can set it's currentView property.

toggleForm: (e) ->
  e.stopPropagation()
  @get('formContainerViewName').set('currentView', Em.View.create())

BTW I'd recommend renaming the formContainer property to be FormContainer since the convention is to start with UpperCase for class definitions.

Here's a working example: http://jsfiddle.net/ZJjUM/1/

ember containerView as a property

1 Answers