Question

假设我有一个模型应用程序 Page,一个阵列控制器 App Page, 和一个App Page View 来制作每个应用程序。

我想找出如何最佳地执行 App.MyPagesView ,

if App.showAllPages is true: I want MyPagesView to contain an App.PageView(s) for displaying each of the App.Page in App.pages
Else: I want MyPagesView only show one App.PageView, bound to App.pages.currentPage.

我最直截了当的执行方式就是使用这样的模板:

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

< strong> 但每次用户打开或关闭 < em'showAllPages 用户都会为现有模型创建新视图吗? 另外, 当我尝试使用此模板时, 我也会收到关于性能问题的 emberJS 警告。

PageView(s) 可能非常复杂,而且成本很高。我真的很想为每页创建一次PageView(PageView), 并在没有使用时从DOM中删除/隐藏不相关的PageView(PageView) 。

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

回想一下,执行 MyPagesView 的适当 EmberJS-y 方法是什么? 它响应 App.showallPages 而不在每次拖动时重新生成所有视图?

应该是集装箱查看吗? 或者我应该使用问题顶端显示的除非/ else 模板? 或者完全不同的模板? 我觉得EmberJS中存在一个很简单的解决方案,但是它能消除我。

Answer 1

这里我所想到的最好的, 被封装为可重新使用的视图类, 名为“ 当前收藏查看 ” 。我使用收藏查看, 并使用视图. set (可视) 隐藏/ 显示适当的子视图。基本上把它像收藏查看一样使用, 但是您可以设置当前内容的属性来隐藏全部内容, 或者使用 showAllContent 来取代当前内容。

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

使用当前集合视图执行 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"}}

希望别人认为这个计划有用和/或能有所改进(请! )

友情链接