基本的Ember.js路由和数据加载

Question

在不断变化的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的数据.

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

Answer 1

您的脚本存在一些问题

1. 您正在加载库的顺序:Ember取决于Handlebars,因此必须在 Ember 之前加载.我改变了订单.
2. 该{{action}}阅读:助手,以支持多个上下文已经改变了这个.你也试图迭代实例moviesController但是因为你正在使用Router你应该简单地遍历你controller注入的那个.moviesControllerconnectOutlets
3. 由于显而易见的原因,您的AJAX调用永远不会在JSFiddle上运行:您指向的URL位于您的环境中,而JSFiddle则无法实现这一点.我手动将数据添加到您的集合中,以便您看到正在运行的内容.

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

编辑:

不像在这个问题说,你做得到控制台错误:

未捕获错误:<.ApplicationView:ember158> - 无法找到模板"应用程序".

这个断言帮助我找到了你添加脚本(把手和ember)的顺序问题,因为模板名称是正确的,这意味着它与视图中指示的名称相匹配,因此问题必须在其他地方.我注意到在JSFiddle的"管理资源"选项卡中你已经在Handlebars之前加载了Ember,它产生了很大的不同.