Ember 路线模型错误

Question

我正在深入研究 Ember 并尝试向我的路由模型提供内容列表。这是我的 App.js 代码：

var App = Ember.Application.create({});

    App.Router.map(function() {
        this.route('about');
        this.resource('blogs');
        this.resource('projects');
    });

    App.PROJECTS = [
        {
            "id": 1,
            "title": "SnapFoo - SVG Animation Library",
            "textone": "SnapFoo",
            "texttwo": "SVG Animation Library",
            "image": "snapfoo.jpg"
        }
    ];

    App.ProjectsRoute = Ember.Route.extend({
      model: function() {
        return App.PROJECTS;
      }
    });

PROJECTS 数组在内容方面有所缩写，但这就是格式。现在，我正在尝试运行我在 Hanldebars 模板中的每个循环，如下所示：

<script type="text/x-handlebars" data-template-name="projects">
 {{#each}}
  <div class="project-icon">
   <span>{{textone}}</span>
   <span>{{texttwo}}</span>
   <a href="project.php?id=1"><img {{bind-attr alt="title" src="image"}}/></a>
  </div>
 {{/each}}
</script>

但是，在执行此操作时，我收到的错误是 未捕获类型错误：无法读取来自 ember.min.js.

的未定义 的属性 'addDependency'

如果我删除 {{each}} 循环，错误就会消失，这让我相信这与路线中的模型有关。但是任何建议都会非常有帮助。谢谢！

Answer 1

您缺少视图中的模型，您没有进行任何迭代{{each}}

在这种情况下，您需要将变量放入 model。

<script type="text/x-handlebars" data-template-name="projects">
 {{#each model as |project|}}
  <div class="project-icon">
   <span>{{project.textone}}</span>
   <span>{{project.texttwo}}</span>
   <a href="project.php?id=1"><img {{bind-attr alt="title" src="image"}}/></a>
  </div>
 {{/each}}
</script>

我创建了一个 example，您可以在其中看到此代码的工作原理，它与您想要实现的目标非常相似。

Ember 路线模型错误

Ember Error in Route Model

javascript

routes

handlebars.js

ember.js