Geek asks and answers

What is the best idiom for creating an EmberJS view that can display all of its child views, or just one?

Let's say I have an App.Page model, an ArrayController App.Page, and an App.PageView to render each App.Page.

I am trying to figure out how best to implement App.MyPagesView so that it works like this:

  • if App.showAllPages is true : I want MyPagesView to contain App.PageView to display each of App.Page in App.pages
  • Else : I want MyPagesView to show only one App.PageView associated with App.pages.currentPage.

The simplest implementation that comes up with me is to use a template like this:

// MyPagesViewApproach1
{{#unless App.showAllPages}}
    {{view App.PageView pageBinding="pages.currentPage"}}
{{else}}
    {{#each pages}}
        {{view App.PageView pageBinding="this"}}
    {{/each}}
{{/unless}}

, showAllPages? , emberJS .

PageView . PageView / PageViews DOM, .

App = Ember.Application.create({
    showAllPages: false,
    pages: Ember.ArrayController.create({
        content: []
        currentPage: null
    }),
    ready: function () {
        this.pages.pushObject(App.Page.create({title: 'Page One'});
        this.pages.pushObject(App.Page.create({title: 'Some Other Page'});
        this.pages.pushObject(App.Page.create({title: 'Grrreatest Page Evar'});
        this.pagesController.set('currentPage',
            this.pagesController.get('firstObject'));
    }
});
App.Page = Ember.Object.extend({
    title: null
    // etc, etc...
});
App.PageView = Ember.View.extend({
    templateName: 'page',
    page: null    // should be bound to an App.Page
});

App.MyPagesView_Approach1 = Ember.View.extend({
    pagesBinding: 'Elicitation.pages'
    // ???
});
App.MyPagesView_Approach2 = Ember.ContainerView.extend({
    // ???
});

HTML:

<script type="text/x-handlebars" data-template-name="page">
    The title of this page is {{ page.title }}
</script>

{{view App.MyPagesView }}

, EmberJS-y MyPagesView, App.showAllPages ?

- ContainerView? if/else, ? - ? , EmberJS, elluding .

+3
1

, , View "CurrentCollectionView". CollectionView view.set('isVisible'), / . CollectionView, currentContent, , , showAllContent currentContent.

App.CurrentCollectionView = Ember.CollectionView.extend({
    showAllContent: false,
    currentContent: null,

    currentContentChanged: function () {
        console.log("Elicitation.PagesView.currentContentChanged()");
        var showAllContent = this.get('showAllContent');

        if (Ember.none(showAllContent) || !showAllContent) {
            var contents = this.get('content');
            var currentContent = this.get('currentContent');
            this.get('childViews').forEach(function (view, i) {
                var isVisible = contents.objectAt(i) == currentContent;
                view.set('isVisible', isVisible);
            });
        } else {
            this.get('childViews').forEach(function (view) {
                view.set('isVisible', true);
            });
        }
    }.observes('currentContent', 'showAllContent', 'childViews')
});

CurrentCollectionView MyPagesView:

App.MyPagesView = App.CurrentCollectionView.extend({
    itemViewClass: App.PageView,
    contentBinding: 'App.pages',
    currentContentBinding: 'App.pages.currentPage',
    showAllContentBinding: 'App.showAllPages',
});

:

{{view App.CurrentCollectionView itemViewClass="App.PageView" contentBinding="App.pages" currentContentBinding="App.pages.currentPage" showAllContentBinding="App.showAllPages"}}

, - / (!)

+2

More articles:


All Articles