我正在尝试将控制器中的某些信息显示到我的视图中,但未显示该信息。
到目前为止,我有一个小提琴来演示我的代码:
小提琴
如果我在控制台中检查MovieTracker.movieController.content,则会显示2个对象。但是,HTML 未正确显示。可能是什么问题?
以下是我的观点:
<script type="text/x-handlebars">
{{#each MovieTracker.movieController}}
<h2>{{title}}</h2>
<h3>{{rating}}</h3>
{{/each}}
还有我的 Ember 应用程序 + 控制器:
// Create our Application
MovieTracker = Ember.Application.create();
// Inherit outlet Support
MovieTracker.ApplicationController = Ember.Controller.extend();
// ArrayController to create some new Movies
MovieTracker.movieController = Ember.ArrayController.create({
content: [],
init: function(){
var kidsMovie = MovieTracker.Movie.create({
title: 'Toy Story',
rating: 4
});
this.pushObject(kidsMovie);
var avengers = MovieTracker.Movie.create({
title: 'The Avengers',
rating: 5
});
this.pushObject(avengers);
}
});
// Start our Ember Application
MovieTracker.initialize();
我已经更新了您的小提琴(请参阅此处:http://jsfiddle.net/schawaska/hKPQy/24/)以将"电影"视图绑定到控制器实例,并且还向控制器内容添加了内容属性绑定。还添加了对最新版本的余烬和车把的引用。
现在您有几个模板:
<script type="text/x-handlebars" data-template-name="application">
<h1>Movie Tracker</h1>
{{view MovieTracker.MovieTrackerView }}
</script>
<script type="text/x-handlebars" data-template-name="movie-tracker">
Movies:<br />
{{#each movie in content}}
<h2>{{movie.title}}</h2>
<h3>{{movie.rating}}</h3>
{{/each}}
</script>
现在,您的each
帮助程序将循环访问一个集合,将每个值分配给movie
,这是您的模型(也丢失了,所以我创建了一个)及其属性。
您的控制器和视图如下所示:
MovieTracker.moviesController = Ember.ArrayController.create({
content: [],
init: function(){
// you missed the call to _super()
this._super();
var list = [
MovieTracker.MovieModel.create({
title: 'Toy Story',
rating: 4
}),
MovieTracker.MovieModel.create({
title: 'The Avengers',
rating: 5
})];
// also, it's a good idea to use .set whenever you can
this.set('content', list);
}
});
MovieTracker.MovieTrackerView = Em.View.extend({
templateName: 'movie-tracker',
controllerBinding: 'MovieTracker.moviesController',
contentBinding: 'controller.content'
});