0

コンポーネントのルーティングは canjs でどのように行われますか?
次の例があります

can.Component.extend({
    tag: "router",
    events: {
      "{can.route} id bla": function(route, event, id, bla) {
        console.log("route", id, bla);
      }
    }
  });

特定のルートを一致させるにはどうすればよいですか? たとえば、page/2/foo です。
ルートは次のように定義されます。 

can.route(":page/:id/:bla", {page: "", id: "", bla: ""});
4

1 に答える 1

0

コンポーネントでルーティングを行うコツは、コンポーネントでルーティングを行わないことです。代わりに、次のようなもので

can.route(":page/:id", {page: "content", id: "index"});

can.route状態オブジェクトとして渡します。次のようなメイン ビューを使用します。

<script id="main" type="text/mustache">
  <app-page page="state.page" page-id="state.id"></app-page>
</script>

コンポーネントのようにレンダリングされ、can.view('main', { state: can.route })それらの属性をチェックするだけです:

can.Component.extend({
  tag: 'app-page',
  template: 'page',
  scope: {
    isBlog: function() {
      return this.attr('page') === 'blog';
    },

    isStatic: function() {
      return this.attr('page') === 'content';
    }
  }
});

子コンポーネントを初期化するビューの場合:

<script id="page" type="text/mustache">
  {{#if isBlog}}
    <app-blog blog-id="pageId"></app-blog>
  {{/if}}
  {{#if isStatic}}
    <app-static page-id="pageId"></app-static>
  {{/if}}
</script>
于 2014-10-06T17:27:41.853 に答える