【Riot.js】タグ間で動作を連動させる - Qiita
Riot.jsでは各タグ内で様々な挙動を実装していくのですが、タグ間で動作を連携させたいときもあります。 そういった場合はobservableを使うとスムーズになります。 まず適当にタグをいくつか用意して、あるタグから他のタグへ何かしらの通知をしてみたいと思います。 動作サンプル (JSFiddle向けに少し記述を変更しています) 呼び出し元となるhtmlが次のようになります。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Riot.js</title> </head> <body> <foo></foo> <bar></bar> <baz></baz> <script src="https://cdn.jsdelivr.net/riot/2.2/riot.min.js"></script> <script src=
riot.js 子tagの独立性を上げる。 - Qiita
riotは親子関係を把握することが出来るが、互いのモジュールを知らないほうが独立性が上がり、並行してモジュール開発が出来る。 自分自身にトリガーを引いて(change)、第三者モジュールが変更を検知して参加者全員に知らせる。(changed) 自分自身は参加者は知らないし、誰がchangedしたのかも知らない。ただ、変更されたデータストアが投げられる。 riot.tag('ed','<div ref="code" contenteditable="plaintext-only" oninput="{input}"></div>',function(opts){ let self=this,code=null; self.on('mount',()=>{code=self.refs.code}) self.on('changed',(d)=>{ if(code.textContent!=d.
riot.jsでattribute経由でoptsに渡されるプロパティ名について - Qiita
<!-- マウント先 --> <div class="main" chain-case='chain' camelCase='camel' snake_case='snake' /> <!-- マウントするタグ --> <script type="riot/tag"> <my-tag> <h3>Hello { opts.title }</h3> console.log(opts); </my-tag> </script> <script src="https://cdn.jsdelivr.net/riot/2.3/riot+compiler.min.js"></script> <script> riot.mount('div.main', 'my-tag', {title: 'World', 'chain-title': 'chain', camelTitle : 'camel', sna
Gituhb pageを利用したRiot.js のSPA型Webページ骨子（案） - Qiita
Introduction 久しぶりに投稿させていただきます． 先日，githubをあれこれ調査していたら， 指定したブランチにgithub pagesを公開できるにという記事を発見致しました． 驚きました，ヤックデカルチャーです． もう gh-pagesブランチを作らなくて良いのね... しかも__レポジトリ毎__に作れる！!! Purpose さて，本題です． github にはwiki機能もありますが，github pagesを使えるのであれば， そちらを使ってDocumentを作成する方も多いでしょう． そこで，SinglePageApplicationを利用して簡単にイケてるgithub pagesを作る方法を提案したいと思います． 利用するのは，，， Riot.jsちゃんです！ 2016年から2017年にかけて一時期盛り上がってましたね，私はVue.jsに魅了されていましたが．
Riot 3.7と4つの値 - Qiita
Riot 3.7にアップデートしたところ、今まで動いていたコードがうまく動かなくなってしまいました。 falsyな値 JavaScriptには、falsyな値（条件式に入れるとfalseとして処理される値）が7つあります1。 false null undefined 0 -0 ''（空文字列） NaN Riot 3.7では、このうち数値でない4つ（false、null、undefined、''（空文字列））の挙動が3.6以前と違ってきます。 実際にやってみた まずはこちらのPlunkrを御覧ください。ラジオボタンを生成して、onchangeでvalueをalertするようにしてあるだけですが、false、null、undefined、''の4つは、「on」という妙な値を表示します2。これは、Riotで値のないvalue属性を削除してしまっているからということです（Issue）。そして、va
改めてRiot.jsをその他のFW・ライブラリと比較して客観的に評価した - Qiita
Riot.js（以下、Riot）は非常にシンプルかつ軽量で入門の敷居も低く、とても書きやすいコンポーネント指向のUIライブラリです。筆者はRiotが好きでよく使っていますが、今日はなるべく客観的にRiotがどれくらい有用なライブラリかを振り返って見たいと思います。ポエム形式、かつ長めの記事ですのでご了承ください。 ※ 筆者は下記のフレームワーク・ライブラリの中で、Backbone以外は触ってはいますが、実案件で導入したことはないため、あまり知見がありません。ですので後学のため、なにかご指摘いただけると助かります。 tl;dr tl:drと言いながらちょっと長いです…🙇 それぞれの評価 Backbone 古参のフレームワーク だいぶ枯れている 更新はバグフィックスが主で、あまり機能拡張はない Angular Google謹製 現在もっともフレームワークらしいフレームワーク TypeScri
遠隔制御の功罪とRiot - Qiita
アドベントカレンダーの期間ということで、今までもやっと思っていたことも文章にしてしまおうかと思います。 ここで考える「遠隔制御」 「遠隔制御」といっても、IoTの機器制御とかウイルスでリモートマシンを乗っ取るとか、そういう話をするつもりではありません。ここでいう「遠隔制御」というのは、例えば HTMLの要素へクラスをかけて、それに対してCSSを適用する ある特定のdata-xxx属性を付けたHTML要素について、自動的に特定のJavaScriptを動かす ページ内に適当にRiotのタグを書いて、まとめてriot.mount('*')でマウントする のように、「書いた箇所と別の箇所で何かを制御すること」というような話を意図しています。 遠隔制御の利点 直接書くような方法がある状況で、遠隔制御をするメリットは、「再利用性を上げられる」ことです。CSSを例にしてみると、ページに直書きしてしまうと
Bootstrapのウィジェットを手抜きでRiot化 - Qiita
Bootstrapのウィジェットを見ていたら、Riot.jsで動かすのもそう難しくないかなと思うところがありました。 「手抜き」の意味 「手抜き」と書きましたが、何の手を抜くのかといえば、「Bootstrap用のCSSをそのまま流用する」ということです。デザインにBootstrapを使っている場合、ウィジェット用のCSSまで一本になっているので、流用することにかかるコストはほぼありませんし、多くのウィジェットは「CSSで形が決まっていて、jQueryで主にやっているのはクラスの付替えだけ」という感じなので、同じHTML構造をRiotで作ればすぐできそうな感じです。 JavaScriptを見てみる 具体的に、ドロップダウンのJavaScriptを見てみましょう。実際に行っていることは、 展開時…openクラスを追加する、aria-expanded=trueにする、必要ならバックドロップを入れ
Riot.jsのタグオブジェクトを探す - Qiita
ページ全体をRiotで作っている場合はあまり問題にならないかもしれませんが、「HTMLの中にRiotタグが散在している」かつ「Riotのマウントと別な箇所でタグを使った処理をしたい」というような状況下では、「あとからページにセットしたRiotタグのオブジェクトを取得したい」という場面が生じてきます。 これは、Riotのデータ構造をたどることで実現可能です。 Riotのデータ構造 グローバルにある状況であればグローバルのriot、const riot = require('riot');としている場合はそのriotを使えますが、riot.util.vdomに、ページへマウントしたタグオブジェクトが配列となって入っています。 そして、タグオブジェクト自体（で、今回のテーマに関係するもの）には、以下のプロパティがあります。 tag.root…対応するDOMノード tag.tags[子タグ名]…こ
[Riot.js]Maximum call stack size exceededに陥った - Qiita
Riot.jsで下記エラーに遭遇して少しだけハマりました。 Uncaught RangeError: Maximum call stack size exceeded Maximum call stack size exceededとは 再帰関数などでreturnされずに上限まで呼び出されたときに起こります。 関数を呼び出す毎にスタックに追加してるけどもう限界ってときになります。 このエラーが出た時は再帰関数のreturn漏れを疑うのが早期解決っぽいです。 再帰関数がない 私の場合、コードを確認しても再帰してる自作関数が見つかりませんでした。 となると怪しいのはRiot.jsが提供してる関数かなと思い、this.update()周りを要確認してました。 console.log()で確認しながら探していると、自作タグの呼び出し先で繰り返しthis.update()が呼ばれているらしい。 とい
![[Riot.js]Maximum call stack size exceededに陥った - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/98eb5893dd715b3cf06df4a5da36632fe23b286b/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMjA1MjM1JTJGcHJvZmlsZS1pbWFnZXMlMkYxNTA4ODE0MDY1P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPTE3NDYxODZlNDM0M2I4OTc0MDZhYWExZmE3ZmQyMGI5%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Dfd896709b4dde5f60fd5f19b25720946%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCUmlvdC5qcyU1RE1heGltdW0lMjBjYWxsJTIwc3RhY2slMjBzaXplJTIwZXhjZWVkZWQlRTMlODElQUIlRTklOTklQTUlRTMlODElQTMlRTMlODElOUYmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz0xMDEzNmU0OTFjMThiNjEwY2Y0YTI5ZTFiMWQ0ZDE5YQ%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBuYWdpdG8yNSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWU5YWRjZDQ0OGFlOGEwYjUxNmE2NThlNzVmMGU3MGQ1%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D5043fe2063858b087fbeb0c94cf42b96)
インデント派のためのriot環境 + autoprefixer付のカスタムパーサー(webpack) - Qiita
riotが良いの どうも、効率的な仕事ぶり、充実した私生活, キャリアウーマンです さて、web開発でriotを最近ごりごり使うようになってきました。 デフォルトでpugシンタックスがサポートされてますし、特に余計な設定せずともインデントスタイルを貫けるのですが、 今回はその環境にsassを加えつつ、styleタグ内で@importしたり,autoprefixerを使えるようにするwebpack用のカスタムパーサーをご紹介します。 インデント型が好きなの 私は細胞レベルでインデントスタイルに恋してます インデントと改行を強要する言語は、瞬時にコードの構造を視覚的に理解させることができるので、結構好きです。 コードをシンプルにしようと、意識を高めてくれます。 おもうに、構造と密に関わるuiコンポーネントを記述するのに適していると思われます。 多くの方が同じ理由でマークアップテンプレートとして
Riot.jsで自分の頭の足りなさをごまかせた話 - Qiita
var createCell = function (v) { // 今月の1日をゲットする var now_date = new Date(); var today_date = new Date(now_date.getFullYear(), now_date.getMonth() + v); // 今月のデータ var today_now_date = new Date(now_date.getFullYear(), now_date.getMonth(), now_date.getDate()); // 今日のデータ var ts_base = today_date.getTime(); // timestampの作成 // カレンダーの順番は日曜日からとする var calendar_cell = []; var calendar_cell_base = []; // カレンダー
Riot.js - Qiita Advent Calendar 2017 - Qiita
Riot.jsに関するAdvent Calendar 2017版です！（昨年はこちら） Riot.jsに関することなら、どんなことでも構いません！ 皆さんでRiot.jsについて語りましょうー！
Riot.jsのコンポーネント間データ渡し - Qiita
Reactを触った経験を元にRiotに手を出しています。 コンポーネント指向で開発したくても、AngularやReactはビルドツールが複雑な印象を持たれており、拒否反応がある社内の古参開発者には勧めにくいと感じていました。Riotはscriptタグベースで始められるので、コンポーネント指向入門としては敷居が低くその点が魅力的ですね！Riotで感覚を掴んでもらえれば「今度はReact試してみる？？？」という気運も高まってきそうです。 今日はRiotを使ったコンポーネント間のデータ連携を整理してみたいと思います。 データ渡しのパターン ざっと調べた限りでは以下の4パターンがあるみたいです。 属性渡し tags経由渡し parent渡し Observer渡し 属性渡し 独自タグの属性に値を渡す方式です。
Riot.jsで配列を飛ばしつつ回すと、正しいインデックスが取れない - Qiita
Riot.jsを使っていろいろ組んでいたのですが、ちょっと想定外の挙動を食らってしまいました。 each Riotのタグ内では、eachを使って配列を展開することができます（オブジェクトにも使えますが、今回の話題と関係ないので、とりあえずそちらは省略します）。 公式ガイドにも例が上がっていますが、 each={ arr }…arrの中身をオブジェクトとしてタグ内に展開 each={ item in arr }…arrの各要素をitemとして取得できる each={ item, i in arr }…arrの要素はitem、インデックスはiとして取れる というようになっています。ただ、実際には最後のものに落とし穴がありました。 配列を飛ばしてみた Riotのタグ内で直接使える制御構造はeachとifだけですが、「eachで回しつつ、ifで一部だけ取る」ようなことをしたくなることがあります。そ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Riot.jsで要素を`each`させると"Uncaught TypeError: Cannot read property 'root' of undefined" - Qiita
riotタグにjsonで連想配列を渡してやるとvalueが消える件 - Qiita
Parcel+Riot 開発環境構築 - Qiita
Riotタグの外側にコードを書く - Qiita
React と Riot.js の書き方の比較 - Qiita
