Ember cannot find my view

Question

I have defined a View subclass MenuitemView to which I'm referring from a template (see below). But Ember doesn't find it. I keep getting this error: Error: assertion failed: Unable to find view at path 'App.MenuitemView'. What am I missing?

Initialization code:

window.require.register("initialize", function(exports, require, module) {
  var App;
  App = require('app');
  App.Router.map(function(){});
  require('routes/IndexRoute');
  require('templates/menuitem');
  require('templates/application');
  require('templates/index');
  App.initData();
});

View definition:

window.require.register("views/MenuItemView", function(exports, require, module) {
  var App;
  App = require('app');
  module.exports = App.MenuitemView = Em.View.extend({
    templateName: 'menuitem',
    visibility: function(){
      if (App.selectedDishType && !App.selectedDishType === this.get('dish').get('type')) {
        return 'invisible';
      } else {
        return '';
      }
    }
  });
});

Template referring to view (templates/index.hbs):

{{#each item in content}}
    {{view App.MenuitemView itemBinding=item}}
{{/each}}

View template (templates/menuitem.hbs)

<div class="dishitem">
    <div class="dishimage">
        {{thumbnail item.dish.identifier}}
    </div>
    <div class="dishdetails">
        <p class="dishname">{{uppercase item.dish.name}}</p>
        <p class="dishdescription">{{item.dish.description}}</p>
        <ul class="packages">
        {{#each package in item.packages}}
            <li>
                <span class="packageprice">€ {{package.price}}</span>
                <span class="packagespec">
                    {{#if package.description}}({{package.description}}){{/if}}
                </span>
            </li>
        {{/each}}
        </ul>
    </div>
</div>

Answer 1

The problem was caused by the fact that I was using Brunch for building the application and I have all the javascript components and templates in separate files. Brunch then compiles the templates to separate common.js javascript modules. The code in the template's compiled module does not have access to the view defined in the view module. The way to normally handle such dependencies is to add "require('my-other-module')" to the dependent module's javascript. But, as my template source is not javascript but handlebars, I cannot add this to the source. The solution is to ensure your application namespace is globally available. You do this by not putting your application initialization code in a module, e.g. directly in your html, inside a script tag:

<script>
App = require('app');
</script>

Answer 2

What I do notice is that the 'item' part of menuitemview is sometimes upper case (views/MenuItemView), sometimes lower case. Could that be the source of the error message?

Answer 3

I encountered a similar problem with ember-tools, and the accepted answer set me on the right path. I'll leave my solution here for posterity.

I had my app set up like this:

var FooRoute = Ember.Route.extend({
  ...
  renderTemplate: function() {
    this.render();
    this.render('Bar', {into: 'foo', outlet: 'bar', controller: 'foo' });
  },
  ...
});

and in the template foo.hbs:

{{outlet bar}}

This was causing problems for the same sorts of reasons @RudiAngela mentions in the accepted answer. Instead of including a <script> tag, though, I just changed the {{outlet}} to a {{view}},

{{view App.Bar}}

and this solved the problem for me.