2

初めて YUI アプリ フレームワークを使用してアプリを作成しています。だから私はまだそれがどのように機能するかを理解しようとしています。

私のアプリは同時に複数のビューを表示します。これは、ネストされたビューを使用して行われます。アプリをナビゲートするとき、親ビューを再レンダリングすることなく、(サブ) ビューの 1 つだけを変更できる必要があります。

ここに簡単な例を作成しました：http://jsfiddle.net/casperskovgaard/BDqjz/6/

アプリは、2 つのサブビューを含む 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 であるため、ルートが変更されるたびに両方のサブビューが再レンダリングされます。

メニュー ビューのリンクをクリックしたときに、コンテンツ ビューのみが再レンダリングされるように変更するにはどうすればよいですか?

また、サブビューでコンテナ属性を使用する方法について少し混乱しています。ヒントをいただければ幸いです

-キャスパー

4

2 に答える 2

1

ここで重要なのは、ページのメニューを常に表示し、ルート ハンドラーに基づいてコンテンツ ビューのみを変更する場合は、Y.App 構成の "viewContainer" ノードを #content DOM ノードに設定する必要があることです。それに加えて、homePage にルート ハンドラー .showView を配置するのではなく、ルートに直接関連付けられたビューを表示する必要があります。したがって、.handleFirst は「firstView」を表示します。これを実現するには、アプリの「views」プロパティから「homePage」と「menuView」を削除し、より高いレベルで処理するようにします。これにより、それらは一度だけ発生し、viewContainer ノードはすでにY.App インスタンスをインスタンス化する前の DOM。

実際には、2 つの段階があり、

1) ページ/アプリの読み込み: 初期設定が 1 回行われるため、HomePage ビューを使用してページを作成し、次にアプリを作成して 2 つを接続します。

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 を参照してください。

(サブビュー クエリについては、より具体的な別の質問を開く必要があります。)

于 2013-05-31T13:16:27.300 に答える