model-view-controller - 从 ArrayController 显示 HTML

Question

我正在尝试将控制器中的一些信息显示到我的视图中，但未显示该信息。

到目前为止，我有一个小提琴来演示我的代码：

小提琴

如果我在控制台中检查 MovieTracker.movi​​eController.content，就会显示 2 个对象。但是，HTML 没有正确显示。可能是什么问题呢？

这是我的观点：

<script type="text/x-handlebars">
{{#each MovieTracker.movieController}}
    <h2>{{title}}</h2>
    <h3>{{rating}}</h3>
{{/each}}

​</p>

还有我的 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();​

Answer 1

我已经更新了您的小提琴（请参见此处：http: //jsfiddle.net/schawaska/hKPQy/24/）以将“电影”视图绑定到您的控制器实例，并且还添加了一个与控制器内容绑定的内容属性。还添加了对最新版本 ember 和车把的引用。

现在你有几个模板：

<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'
});