【f7-panel】f7-panel上で、別ページのリンクを押下する時の動作【panelが閉じない】

f:id:duo-taro100:20160218004611p:plain

Framework7のf7-panel上にリンクを作成して、表示するページを変更するときに、工夫しないとpanel上にそのページが表示されてしまう。
例えば、以下のようなpanelを用意。

<!-- Right Panel -->
<f7-panel right reveal layout="dark">
  <f7-view id="right-panel-view" navbar-through :dynamic-navbar="true">
    <f7-navbar title="Right Panel" sliding></f7-navbar>
    <f7-pages>
      <f7-page>
        <f7-block>
          <p>Right panel content goes here</p>
        </f7-block>
        <f7-block-title>Load page in panel</f7-block-title>
        <f7-list>
          <f7-list-item link="/about/" title="About"></f7-list-item>
          <f7-list-item link="/form/" title="Form"></f7-list-item>
        </f7-list>
      </f7-page>
    </f7-pages>
  </f7-view>
</f7-panel>

これだと、panel上にリンク先のページが表示される。
つまり、panelが閉じることなく、panelの領域が書きかわる。
これは想定していない動きだったので、どうすれば？と思っていたらサンプルにその実装があった。
見落としていた。

<!-- Right Panel -->
<f7-panel right reveal layout="dark">
  <f7-view id="right-panel-view" navbar-through :dynamic-navbar="true">
    <f7-navbar title="Right Panel" sliding></f7-navbar>
    <f7-pages>
      <f7-page>
        <f7-block>
          <p>Right panel content goes here</p>
        </f7-block>
        <f7-block-title>Load page in main view</f7-block-title>
        <f7-list>
          <f7-list-item link="/about/" title="About" link-view="#main-view" link-close-panel></f7-list-item>
          <f7-list-item link="/form/" title="Form" link-view="#main-view" link-close-panel></f7-list-item>
        </f7-list>
      </f7-page>
    </f7-pages>
  </f7-view>
</f7-panel>