Porting a view hierarchy from ember-0.9.8.1 to ember-1.0.0-rc.6

0
votes

I can not get my head around this. I have started from this jsfiddle (a showcase for image preview + upload), which is working with ember-0.9.8.1, and I am trying to get it working with ember-1.0.0-rc.6 in this jsbin.

This is the relevant part causing problems:

<script type="text/x-handlebars">
    {{#view Ember.View contentBinding="App.myModel"}}
      {{#view App.PreviewUploadImage name="logo_image" contentBinding="content"}}
        {{view fileField}}
        {{view previewImageView width="200" height="100" srcBinding="content.myModel_src"}}
      {{/view}}
    {{/view}}
</script>

Together with this js:

App.PreviewUploadImage = Ember.View.extend({
    fileField: Ember.TextField.extend({...}),
});

As you can see in the console errors:

Assertion failed: Unable to find view at path 'fileField'
Assertion failed: You must pass a view to the #view helper, not fileField () 
Uncaught TypeError: Cannot read property 'proto' of undefined

But fileField is a Ember.TextField (so indeed a view) and is defined in the context where it is used (the view PreviewUploadImage).

So where is the problem then?

2
ember.js

2 Answers

1
votes

I guess the problem you are running into is due to the fact that the fileField view is not created automatically so the lookup fails.

Try to create the view instead of extending:

App.PreviewUploadImage = Ember.ContainerView.extend({
  childViews: ['fileField'],
  fileField: Ember.TextField.create({...}),
});

Update

edited my answer I forgot something substantial, to make the outer view a ContainerView and define fileField as a child view in the childViews array.

Hope it helps.

0
votes

this does not reference the view, but your controller content. You will have to reference the view using view, like do this: 

<script type="text/x-handlebars">
  {{#view Ember.View contentBinding="App.myModel"}}
    {{#view App.PreviewUploadImage name="logo_image" contentBinding="content"}}
      {{view view.fileField}}
      {{view view.previewImageView width="200" height="100" srcBinding="content.myModel_src"}}
    {{/view}}
  {{/view}}
</script>