Question

我已经定义了一个View子类MenuitemView，我从模板中引用它（见下文）。但是恩伯没有找到它。我一直收到这个错误：错误：断言失败：无法在路径“App.MenuitemView”中找到视图。我错过了什么？

初始化代码：

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();
});

查看定义：

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 '';
      }
    }
  });
});

模板引用视图（templates / index.hbs）：

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

查看模板（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

问题是由于我使用Brunch构建应用程序而我将所有javascript组件和模板放在单独的文件中。 Brunch然后编译模板以分离common.js javascript模块。模板的已编译模块中的代码无权访问视图模块中定义的视图。正常处理这种依赖关系的方法是将“require（'my-other-module'）”添加到依赖模块的javascript中。但是，由于我的模板源不是javascript而是把手，我无法将其添加到源代码中。解决方案是确保您的应用程序命名空间全局可用。您可以通过不将应用程序初始化代码放在模块中来实现此目的，例如直接在您的html中，在脚本标记内：

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

Answer 2

我注意到menuitemview的'item'部分有时是大写（views / MenuItemView），有时是小写。这可能是错误消息的来源吗？

Answer 3

我遇到了与ember-tools类似的问题，接受的答案让我走上了正确的道路。我会把我的解决方案留给后人。

我的应用设置如下：

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

并在模板中foo.hbs：

{{outlet bar}}

由于@RudiAngela在接受的答案中提到了同样的原因，这导致了问题。不过，我只是将{{outlet}}更改为{{view}}，而不是包含<script>标记，

{{view App.Bar}}

这解决了我的问题。

灰烬无法找到我的看法

3 个答案: