0

您好，我正在关注 José Mota 在 tuts premium 中的“让我们学习 ember”。我陷入了一个非常奇怪的境地。

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

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

我基本上有一个警报视图来处理消息的淡入和淡出，App.flashController 控制器又从 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>

这是应该显示闪存消息的地方

<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!"}))

返回了一个类

类{消息：“Hello！”，构造函数：函数，toString：函数，重新打开：函数，初始化：函数...}

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

我不知道出了什么问题，我对这个 ember.js 世界完全陌生。

4

1 回答 1

1

App.FlashListView 中可能存在拼写错误，应该是单数contentBinding而不是复数contentBindings

App.FlashListView = Ember.CollectionView.extend({
    itemViewClass: "App.AlertView"
,   contentBinding: "App.flashController"
});
于 2013-10-10T08:23:19.737 回答