在不断变化的 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>
模板加载正确,因为我可以看到“应用程序”和“电影列表”标题,但无序列表没有填充数据。
我在控制台中没有收到任何错误,正确返回了 XML 请求,如果我键入 App.moviesController.content,我会得到一个“类”数组,其中包含来自我的 API 的数据。
任何人都可以提供任何想法或指导吗?