javascript - 如何使用 YUI 应用程序框架更改 subview

Question

我第一次使用 YUI 应用程序框架创建应用程序。所以我仍在尝试了解这一切是如何运作的。

我的应用程序将同时显示多个 View ，这是通过使用嵌套 View 来完成的。导航应用程序时，应该可以仅更改其中一个(子) View ，而无需重新渲染父 View 。

我在这里创建了一个简单的示例:http://jsfiddle.net/casperskovgaard/BDqjz/6/

应用程序将渲染一个包含两个 subview 的 HomePageView。菜单 View 和内容 View 。从菜单 View 中可以更改内容 View 。

渲染主页的代码如下所示:

render: function () {
    Y.log('render homepage view');
    var container = this.get('container');

    container.setHTML(this.template());
    container.one('#menu').setHTML(new Y.MenuView().render().get('container'));
    container.one('#content').setHTML(this.get('content').render().get('container'));

    return this;
}

如果路线改变，内容 View 也会改变。

因为现在是 HomePageView，每次路由更改时，两个 subview 都会重新渲染。

如何更改它，以便在单击菜单 View 中的链接时仅重新呈现内容 View ？

此外，我对如何在 subview 上使用容器属性有点困惑，任何提示将不胜感激

-卡斯帕

Answer 1

根据第一个答案下评论中的进一步描述，我仍然会从“views”属性中删除 MenuView 和其他 subview ，因为它实际上仅用于将成为“activeView”的 View ，而它们不会。

我将使 HomePageView 成为“保留” View ，并使用传递给“showView”的选项对象的“回调”属性来告诉该 View 要显示什么内容。

所以“ View ”现在看起来像:

views: {
    homePage: {type: 'HomePageView', preserve: true}
}

你的处理程序看起来像:

handleFirst: function () {
    this.showView(
        'homePage',
        null,
        { 
            callback: function (view) { 
                view.showContent(Y.FirstView); 
            }
        }
    );
}

我向 HomePageView 添加了一个方法，如下所示:

showContent: function (ctr) {
    Y.log("HomePageView::showContent: " + ctr);
    var container = this.get('container');

    container.one('#content').setHTML((new ctr).render().get('container'));
}

这是最简单的情况，它将 View 的构造函数放入内容区域并每次重新创建它，等等。 HomePageView 的实例没有理由不能保留其 subview 的缓存，并且仅在需要时创建它们，等等。无论哪种方式，关键是当底层 View 成为顶层的“activeView”时，您可以使用回调来操作底层 View 。 (或者，我这样做是在该 View 上触发一个事件，而不是向其传递一些内容，然后在 View 上使用事件处理程序来完成肮脏的工作，但我不知道您对自定义事件有多舒服.)

http://jsfiddle.net/brianjmiller/eP7s2/2/

希望能拍出两幅作品。