ごあいさつ
はじめまして、WOWの梶野です。
私の記事は短いですが、当たればデカいを目指してコアな内容を書いていきます。
ハードルを上げすぎてもアレなので、コアじゃないのも書きます。
Riot.jsについて
最近のフロントエンド開発ではReactを使うことが多いですが、私は少数派ですので、「Riot.js」をよく使っています。
検索から来た人は、Riot.jsのことはよく知っているはずなので良いですが、そうでない人はぜひ使ってみてください。
__disabled問題
Riot.jsでは、disabled=”{ !data.reference[0] }”のように判定式でdisabledが出来る。と公式ガイドに書いてある。
真偽値属性 (checked, selected など) はテンプレート変数がfalse的であれば無視されます。
<input checked={ null }>は<input>になります。
http://riotjs.com/ja/guide/#真偽値属性
しかし、いざ使おうとすると、何故か「__disabled」になってしまい、全然機能してくれなかった。
どこで「__disabled」になっているかというと、コンパイル時に変換されているのだが、それでも普通はDOM評価時には「disabled」になるはずが、DOM評価されても、「__disabled」となっていた。
解決策
仕方がないのでdomReady後に無理やり「__disabled」を自前で置き換えて回避してましたが、別件でnpmモジュールを更新していたら、この問題が解決。
riotjs-loaderを3.0.0から4.0.0にしたら、ちゃんと「disabled」になりました。
単純な解決方法だけど、調べた限り全然情報が無かったので、同じようにハマっている人の救いになればと思います。
余談
これは私だけかもしれませんが、riotjs-loaderを4.0.0にしたら、webpack.config.jsの書き換えが必要でした。
type: 'babel' → type: 'none' に変更。
{
enforce: "pre",
test: /\.tag$/,
exclude: /node_modules/,
use: [
{
loader: 'riotjs-loader',
options: {
type: 'none'
}
}
],
}