質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Riot.js

Riot.jsは、React.jsに似たコンポーネント指向なJSフレームワークです。非常に軽量であり、コンポーネントで設計しやすいといったメリットがあります。また、MVCのように分割できることも特徴です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

ルーティング

ルーティングとは、TCP/IPネットワークにおいて、目的のホストまでパケットを送る為のパス選定のプロセスを言います。

Q&A

解決済

1回答

2729閲覧

Riot.jsで、ルーティングによってタグに複数のマウントを行いたいです。

today_only

総合スコア12

Riot.js

Riot.jsは、React.jsに似たコンポーネント指向なJSフレームワークです。非常に軽量であり、コンポーネントで設計しやすいといったメリットがあります。また、MVCのように分割できることも特徴です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

ルーティング

ルーティングとは、TCP/IPネットワークにおいて、目的のホストまでパケットを送る為のパス選定のプロセスを言います。

0グッド

0クリップ

投稿2016/12/04 04:19

編集2016/12/05 17:23

Riot.jsを勉強している者です。
現在、ルーティング部分を書いているのですが、躓きましたので質問させていただきます。

目的
/#home にアクセスした場合、homeタグとnavigationタグをcontentタグにマウントしたいのです。

以下問題のコードです。
現状、試行錯誤を繰り返しているのですが、どうしても一つのタグしかマウントできません。
複数タグのマウントや、又は別の方法で似たような挙動を実現できないか、どうかご教示よろしくお願い致します。

html

1// ~~ 省略 2<app></app> 3<script src ="http://dev.kzho.net/test/app.tag" type="riot/tag"></script> 4<script> 5 riot.mount('*') 6 route.start(true) 7</script>

javascript

1<app> 2 <content></content> 3 4 <script> 5 route(function(tagName) { 6 tagName = tagName || 'home'; 7 riot.mount('content', tagName); 8 }); 9 </script> 10</app> 11 12<home> 13 // home 14</home> 15 16<navigation> 17 // navigation 18</navigation>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

homeの時にタグをマウントするのではなく、最初に全てのタグをマウントしておいて、homeの時のみ内容を表示する形でどうでしょうか。

html

1<body> 2<app></app> 3<script> 4var is_home; 5riot.compile(function(){ 6 riot.mount('*'); 7 route(function(tagName){ 8 tagName = tagName || 'home'; 9 is_home = tagName==='home'; 10 riot.update(); 11 }); 12 route.start(true); 13}); 14</script> 15</body>

html

1<app> 2 <home if="{is_home}"></home> 3 <navigation if="{is_home}"></navigation> 4</app> 5 6<home> 7 <p>home</p> 8</home> 9 10<navigation> 11 <p>navigation</p> 12</navigation>

riot.compile()
タグをブラウザでコンパイルして使う場合、コンパイルが完了してからriot.mount()を使う必要があります。

riot.update();
全てのタグの表示を更新します。

if="{}"
変数がtrueの場合のみタグを表示します。

投稿2016/12/22 09:18

webgoto

総合スコア1293

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

today_only

2016/12/26 14:46

お返事が遅くなってしまいすいません。 こちらの方法で無事解決することができました。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問