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

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

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

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

解決済

1回答

2781閲覧

【Riot.js/Materialize】RiotのtagファイルにSelectを書くと、実行できない?

nnahito

総合スコア2004

Riot.js

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2016/12/14 14:54

質問

Riot.jsのTagファイルに、MaterializeのSelectを書くと、実行できない理由を知りたいです。

Firefoxの、開発者ツールで出力されたHTMLを見ると、しっかりと間違いなく出力されていますが、
実際には表示が変になるんです。

tagファイル

タグファイルの中身は以下です

Tag

1<mytag> 2 3 <div class="input-field col s12"> 4 <select> 5 <optgroup label="term 1"> 6 <option value="1">Option 1</option> 7 <option value="2">Option 2</option> 8 </optgroup> 9 <optgroup label="term 2"> 10 <option value="3">Option 3</option> 11 <option value="4">Option 4</option> 12 </optgroup> 13 </select> 14 <label>{opts.title}</label> 15 </div> 16 17 18 19 20 <script> 21 $(document).ready(function(){ 22 $('select').material_select(); 23 }); 24 </script> 25 26 27 28</mytag>

HTMLファイル

HTMLは以下のようになります

html

1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <!-- CSSのロード --> 6 <link rel="stylesheet" href="./css/materialize.css"> 7 8 9 <!-- JavaScriptのロード --> 10 <script src="./js/jQuery.js"></script> 11 <script src="./js/riot.min.js"></script> 12 <script src="./js/materialize.min.js"></script> 13 14 15 <!-- カスタムタグのロード --> 16 <script src="./customtags/evaluation.tag" type="riot/tag"></script> 17 18 19 20 <!-- ページ内CSS定義エリア --> 21 <style> 22 </style> 23 24</head> 25 26<body> 27 <mytag title="aaaa"></mytag> 28 29 <script> 30 $(document).ready(function(){ 31 // Riotのマウント 32 riot.mount('*'); 33 }); 34 </script> 35 36</body> 37 38</html> 39

表示

イメージ説明

<mytag title="aaaa"></mytag>
の、title属性(?)はしっかり反映されていますが、Selectは実行されておりません。

バージョン

  • Firefox 50.0.2
  • Materialize CSS v0.97.8
  • Materialize JS v0.97.8
  • Riot v2.6.1
  • jQuery v2.1.3

ご存じの方いらっしゃいましたら、ご教示頂けると幸いです。
よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

$('select').material_select();の実行のタイミングがおかしいのではないでしょうか。

JSFifddle

投稿2016/12/14 15:18

mukkun

総合スコア882

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

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

nnahito

2016/12/14 15:22

すごい!ありがとうございます!! 実行時間をわざとずらしている感じですかね?
mukkun

2016/12/14 15:27

ですね。 以下のほうがきれいにかけそうです。 this.on('update', function() { $('select').material_select(); }); this.on('mount', function() { $('select').material_select(); });
nnahito

2016/12/14 16:12

ありがとうございます! またもう一つ質問ができたので、お時間があれば見てあげてください…
nnahito

2016/12/14 16:16

すいません、もう一つの質問、解決しました……
mukkun

2016/12/15 00:15

【Riot.js】カスタムタグファイルに定義したselectのchangeイベントを独立させたい 解決済みになっていないのですが、これのことでしょうか。
nnahito

2016/12/15 03:52

あ、そちら、また別の疑問が出てきて質問させていただいております。 よろしければお力をおかしいただけるとうれしいです……
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問