3

在不断变化的 Ember.js 世界中，我正在寻求一些帮助来启动和运行一个简单的应用程序。

我正在尝试通过带有 Ember.js 的 API 通过 JSON 加载数据的一些基本框架，但无法让数据出现。代码可以在这里找到：

var App = Ember.Application.create();

App.ApplicationController = Ember.Controller.extend();
App.ApplicationView = Ember.View.extend({
    templateName: 'application'
});

App.Movie = Ember.Object.extend({
    title: null,
    rating: null,
    release_date: null,
    poster_image: null
});

App.MoviesView = Ember.View.extend({
    templateName: 'movie-list'
});

App.moviesController = Ember.ArrayController.create({
    content: [],
    init: function(){
        var me = this;
        $.getJSON('/trailers/api/movies',function(data){
            me.set('content', []);
            $(data.movies).each(function(index,value){
                var t = App.Movie.create({
                    title: value.title,
                    rating: value.rating,
                    release_date: value.release_date,
                    poster_image: value.poster_image
                });
                me.pushObject(t);
            })
        });
    }
});

App.router = Ember.Router.create({
    enableLogging: true,
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/',
            redirectsTo: 'movies'
        }),
        movies: Ember.Route.extend({
            route: '/movies',
            connectOutlets: function(router) {
              return router.get('applicationController').connectOutlet({
                viewClass: App.MoviesView,
                controller: App.moviesController
              });
            }
        })
    })
});

App.initialize(App.router);

<script type="text/x-handlebars" data-template-name="application">
  <h1>Application</h1>
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="movie-list">
  <h2>Movie List</h2>
  <ul>
  {{#each App.movieController}}
    <li><a {{action showMovie context="movie" href=true}}>{{title}}</a></li>
  {{/each}}
  </ul>
</script>

http://jsfiddle.net/qmZrT/

模板加载正确，因为我可以看到“应用程序”和“电影列表”标题，但无序列表没有填充数据。

我在控制台中没有收到任何错误，正确返回了 XML 请求，如果我键入 App.movi​​esController.content，我会得到一个“类”数组，其中包含来自我的 API 的数据。

任何人都可以提供任何想法或指导吗？

4

1 回答 1

5

你的脚本有一些问题

  1. 加载库的顺序：Ember 依赖于 Handlebars，因此必须在Ember 之前加载它。我已经改变了顺序。
  2. 助手已更改以{{action}}支持多种上下文：阅读此。此外，您正在尝试迭代的实例，moviesController但由于您正在使用Router，您应该简单地迭代controller注入moviesController您的实例connectOutlets。
  3. 由于显而易见的原因，您的 AJAX 调用将永远无法在 JSFiddle 上运行：您指向的 URL 在您的环境中，而从 JSFiddle 您将无法访问它。我已手动将数据添加到您的集合中，以便您看到正在运行的内容。

这是您的代码的修改版本：JSFiddle Demo

编辑：

与问题中所述不同，您确实在控制台中遇到错误：

未捕获的错误：<.ApplicationView:ember158> - 找不到模板“应用程序”。

这个断言帮助我找到了添加脚本（车把和余烬）的顺序问题，因为模板名称是正确的，这意味着它与视图中指示的名称匹配，因此问题必须出在其他地方。我在 JSFiddle 的“管理资源”选项卡上注意到，您在 Handlebars 之前加载了 Ember，这有很大的不同。

于 2012-08-12T05:59:05.973 回答