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

Question

Hello there i am following "lets learn ember" by José Mota in tuts premium. I am stuck in a very strange situation.

I am at 9th video in the series where i am learning to create list view items and inserting that view in application template. I exactly did what author did in the video, however the result doesn't show up in the screen. But in console the obejct is successfully added.

I am creating a flash message view, whenever user add certain message the flash message should display at the top of the screen with fade in effect.

I have basically an alert view that handles fadein and out of the message, App.flashController controller which in turn extended from App.FlashController, which extends Ember.ArrayController, and App.FlashListView view.

Here is my code

flash.js controller

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

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

FlashListView code:

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

Alert view code

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

here is the order of loading of the files

<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>

And this is where the flash message should be displayed

<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 template code:

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

in browser when I write this command

App.flashController.pushObject(Ember.Object.create({message:"Hello!"}))

a class was returned

Class {message: "Hello!", constructor: function, toString: function, reopen: function, init: function…}

But it doesnt show up in screen as in tutorial.

I have no idea what went wrong and i am completely new to this ember.js world.

Answer 1

There is a possible typo in App.FlashListView, should be singular contentBinding not plural contentBindings

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