7

私はbackbone.jsのネストされたビューについてたくさん読んでいて、それをかなり理解していますが、それでも私を困惑させているのはこれです...

アプリケーションのシェルビューに、ページナビゲーション、フッターなど、アプリケーションの使用中に変更されないサブビューが含まれている場合、ルートごとにシェルをレンダリングする必要がありますか、それとも何らかの方法で実行しますか？ビューをチェックインして、それがすでに存在するかどうかを確認しますか？

アプリを進める前に誰かが「ホーム」ルートに到達しなかったとしたら、私にはそう思えます。

グーグルでこれについて役立つものは何も見つかりませんでしたので、アドバイスをいただければ幸いです。

ありがとう！

4

1 に答える 1

16

「シェル」または「レイアウト」ビューは変更されないため、アプリケーションの起動時に (ルートをトリガーする前に) レンダリングし、さらにビューをレイアウト ビューにレンダリングする必要があります。

レイアウトが次のようになったとします。

<body>
  <section id="layout">
    <section id="header"></section>
    <section id="container"></section>
    <section id="footer"></section>
  </section>
</body>

レイアウト ビューは次のようになります。

var LayoutView = Backbone.View.extend({
  el:"#layout",
  render: function() {
    this.$("#header").html((this.header = new HeaderView()).render().el);
    this.$("#footer").html((this.footer = new FooterView()).render().el);
    return this;
  },

  renderChild: function(view) {
    if(this.child) 
      this.child.remove();
    this.$("#container").html((this.child = view).render().el); 
  }
});

次に、アプリケーションの起動時にレイアウトをセットアップします。

var layout = new LayoutView().render();
var router = new AppRouter({layout:layout});
Backbone.history.start();

そしてあなたのルーターコードで:

var AppRouter = Backbone.Router.extend({
  initialize: function(options) {
    this.layout = options.layout;
  },

  home: function() {
    this.layout.renderChild(new HomeView());
  },

  other: function() {
    this.layout.renderChild(new OtherView());
  }
});

この特定の猫の皮を剥ぐ方法はいくつかありますが、これは私が通常扱う方法です. renderChildこれにより、「トップレベル」ビューをレンダリングするための単一の制御ポイント ( ) が提供removeされ、新しい要素がレンダリングされる前に前の要素が確実に削除されます。これは、ビューのレンダリング方法を変更する必要がある場合にも役立ちます。

于 2013-03-07T18:15:37.043 に答える