在ember.js的模板中插入视图

Question

您好，我正在关注JoséMota的“让我们学习余烬”话题。 我陷入了一个非常奇怪的情况。

我在该系列的第9个视频中，我正在学习创建列表视图项并将该视图插入应用程序模板。 我确实做了作者在视频中所做的事情，但是结果没有显示在屏幕上。 但是在控制台中，对象已成功添加。

我正在创建一个Flash消息视图，每当用户添加某些消息时，该Flash消息应显示在屏幕顶部并具有淡入效果。

我基本上有一个用于处理淡入和淡出消息的警报视图，App.flashController控制器又从App.FlashController扩展而来，后者又扩展了Ember.ArrayController和App.FlashListView视图。

这是我的代码

flash.js控制器

App.FlashController = Ember.ArrayController.extend();

App.flashController = App.FlashController.create({content: Ember.A()});

FlashListView代码：

App.FlashListView = Ember.CollectionView.extend({
itemViewClass: "App.AlertView"
,   contentBindings: "App.flashController"
});

警报查看代码

App.AlertView = Ember.View.extend({
templateName: "_alert"
,   tagName: "div"
,   classNameBindings: ["defaultClass", "kind"]
,   defaultClass: "alert-box"
,   kind: null

,   click: function(){
    this.$().fadeOut(300, function(){ this.remove();});
}
,   didInsertElement: function(){
    this.$().hide().fadeIn(300);
}
});

这是文件的加载顺序

<script src="js/app.js"></script>
    <script src="js/route/route.js"></script>
    <script src="js/controllers/bookmarks_controller.js"></script>
    <script src="js/controllers/bookmark_controller.js"></script>
    <script src="js/views/alert.js"></script>
    <script src="js/views/flash_list.js"></script>
    <script src="js/controllers/flash.js"></script>

这是应显示Flash消息的位置

<script type="text/x-handlebars" data-template-name="application">
        <div>
            <nav class="top-bar" data-options="is_hover:true">
                <ul class="title-area">
                    <li class="name">
                      <h1><a href="#">My Ember Site </a></h1>
                    </li>
                </ul>

                <section class="top-bar-section">
                    <ul class="right">
                        <li class="name">{{#linkTo "index"}}Home{{/linkTo}}</li>
                        <li>{{#linkTo "about"}}About{{/linkTo}}</li>
                        <li>{{#linkTo "about.team"}}About Team{{/linkTo}}</li>
                        <li>{{#linkTo "about.kshitiz"}}About Kshitiz{{/linkTo}}</li>
                        <li>{{#linkTo "bookmarks"}}Bookmarks{{/linkTo}}</li>
                    </ul>
                </section>
            </nav>
        </div>

        <div class="container">
            <div class="row">
                {{outlet}}
                {{view App.FlashListView}}
            </div>
        </div>
    </script>

_alert模板代码：

<script type="text/x-handlebars" data-template-name="_alert">
        {{view.content.message}}
    </script>

在浏览器中，当我编写此命令时

App.flashController.pushObject（Ember.Object.create（{message：“ Hello！”}}））

上课了

类{message：“ Hello！”，构造函数：function，toString：函数，reopen：函数，init：函数…}

但是它不会像教程中那样显示在屏幕上。

我不知道出了什么问题，并且我对这个ember.js世界是全新的。

Answer 1

App.FlashListView中可能有错字，应为单数contentBinding而不是复数contentBindings

App.FlashListView = Ember.CollectionView.extend({
    itemViewClass: "App.AlertView"
,   contentBinding: "App.flashController"
});