如何使用YUI App框架更改子视图

How to change a subview using the YUI App framework

本文关键字：视图 框架 何使用 YUI App      更新时间：2023-09-26

我第一次使用YUI app框架创建一个应用程序。所以我仍在努力理解它是如何工作的。

我的应用程序将显示几个视图在同一时间，这是通过使用嵌套视图完成的。当导航应用程序时，应该只改变其中一个(子)视图，而不必重新渲染父视图。

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

应用将呈现一个包含两个子视图的HomePageView。一个菜单视图和一个内容视图。从菜单视图中可以更改内容视图。

呈现主页的代码如下所示: 
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;
}

如果路由改变，内容视图也会改变。

因为它现在是HomePageView和两个子视图将重新渲染每次路由被改变。

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

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

卡斯珀

根据第一个答案下的评论的进一步描述，我仍然会从"views"属性中删除菜单视图和其他子视图，因为它实际上只用于将成为"activeView"的视图，而它们不会。

我将使HomePageView成为一个"保留"视图，并使用传递给'showView'的options对象的"callback"属性来告诉该视图要显示什么内容。

所以'views'现在看起来像:

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

这是最简单的情况，它将视图的构造函数放入内容区域，并每次重新创建它，等等。没有理由为什么HomePageView的实例不能保持子视图的缓存，只在需要的时候创建它们，等等。无论哪种方式，关键是当底层视图成为顶层的"activeView"时，你可以使用回调来操作它。(或者我已经这样做了，我在视图上触发一个事件，而不是传递一些东西给它，然后在视图上使用事件处理程序来做脏工作，但我不知道你对自定义事件有多舒服。)

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

希望有两幅作品

这里的关键是，如果你总是希望页面显示菜单，并且只根据路由处理程序更改内容视图，那么你应该将y.p p配置中的"viewContainer"节点设置为#content DOM节点。与此同时，与其在主页上显示你的路由处理程序。showview，不如让它们显示与它们的路由直接关联的视图。所以。handlefirst会显示firstView。为了实现这一点，我将从应用程序的"视图"属性中删除"主页"answers"菜单视图"，并在更高的级别处理它们，这样它们只发生一次，并且在实例化y.p p实例之前，你已经将viewContainer节点渲染到DOM中。

实际上你有两个阶段，

1)页面/应用程序加载:初始设置只发生一次，通过主页视图创建页面，然后创建应用程序并将两者挂钩，

2)内容加载:你的应用实例通过路由处理所有这些，只影响内容"窗格"。

var mymainview = new Y.HomePageView().render();
Y.one("body").append(mymainview.get("container"));
var myapp = new Y.MyApp({
    transitions: true,
    viewContainer: "#content"
});
myapp.render();

对您的小提琴进行示例编辑:

http://jsfiddle.net/brianjmiller/W74uc/1/

有关viewContainer的信息请参见http://yuilibrary.com/yui/docs/app/#rendering-an-app

(对于子视图查询，您应该打开一个单独的更具体的问题)

相关文章：