3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Riot.jsでstyle属性を動的に変更しつつshowを利用した際に、showの設定が正しく反映されない

Last updated at Posted at 2016-09-07

riotのshowはifと同様にtrueの場合は表示、falseの場合は非表示となります。
ifと違うのは、ifでfalseが返ればそのタグ自体を削ってしまいますが、showでfalseが返った場合は、タグ生成しつつもdisplay:none;にするところ。
表示はさせたくないけど内部的に後から値を変える必要がある場合はifでは要素そのものが消えちゃうのでshowを使ってました。
hideってのもありますが、trueの時に非表示になるってのが直感的にわかりづらいので試してません。

このshowとstyle属性を書き換えていたら挙動がおかしくなったのでメモ。
style属性の中身を動的に出しつつ、表示・非表示をshow属性を利用した場合、style属性の中身をupdateした際にshow属性の設定がうまく反映されなかった。

test.html
<text></text>

<script type="riot/tag">
  <text>
	<button onclick={ changeColor }>Change Color</button>
	<button onclick={ changeDisplay }>Change Display</button>
  	<p style="color: { textColor };" show={ display }>Sample text A</p>
  	<p style="color: { textColor }; display: { display ? 'block' : 'none' };">Sample text B</p>

    const self = this;

    self.textColor = "#FF0000";
    self.display = true;

    self.changeColor = ()=> {
    	const newColor = (self.textColor === "#FF0000")? "#0000FF" : "#FF0000";
    	self.update({
            textColor: newColor
        });
    };

    self.changeDisplay = ()=> {
    	const newDisplay = !self.display;
    	self.update({
            display: newDisplay
        });
    };
  </text>
</script>

Demo:
https://jsfiddle.net/Kazooooo/t9rL9hnt/

「Change Color」を押すとstyle属性内のcolorの値を切り替え、
「Change Display」を押すとSample text Aではshowを使って表示非表示切り替え、Sample text Bではshowは使わずstyle属性内でdisplayの値を切り替えています。

Sample text Aにおいて、テキストが非表示状態(display:none;の状態)で、「Change Color」を押した場合、displayの値は何も変更していないにもかかわらず表示状態になってしまいます。
style属性を書き換える際に、showの値を無視してcolorだけupdateしてしまい、もともとstyle属性内に存在していたdisplay:none;が消えてしまいます。

Sample text Bのようにshowを利用せずにcolorもdisplayもstyle属性内で変更してやると期待通りの動作になります。

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?