riot.js routerを使ったメモ帳 - Qiita
<script src="//gnjo.github.io/riot.js"></script> <script src="https://rawgit.com/riot/route/master/dist/route.min.js"></script> <app> <div f> <div l><div a>id:{now.id}</div><div ref="code" contenteditable="plaintext-only" oninput="{input}"></div></div> <div r><li each="{d in ds}" onclick="{jump}">{d.id}</li><li onclick="{add}">+</li></div> </div> </app> <style> [a]{border-bottom:1px solid} [f]{dis
underscoreからdebounce と throttleだけ切り出す。 - Qiita
underscoreは15kB. lodashは70kとそれぞれ通信サイズがある。debounceとthrottleだけ使いたい場合には少し重い。 数十行でそのまま切り出せる。 (function(root){ if(root._) return; var _={}; /*original by underscore.js*/ //line 1457 _.now = Date.now || function() { return new Date().getTime(); }; //line 850 _.throttle = function(func, wait, options) { var context, args, result; var timeout = null; var previous = 0; if (!options) options = {}; var later
riot.js table ショート表記タグ - Qiita
<tbl items="a,b,c,d|aliceblue,brown,chacole,darkblue|#aaa,#bbb,#ccc|a,b,c,d,e"></tbl> <script src="//gnjo.github.io/riot.js"></script> <tbl items="a,b,c,d|aliceblue,brown,chacole,darkblue|#aaa,#bbb,#ccc|a,b,c,d,e"></tbl> <style>*{font:14px/normal monaco,consolas,monospace}</style> riot.tag( 'tbl' ,`<table> <tr each="{item in opts.items.split('|')}"><td each="{d in item.split(',')}">{d}<td></tr> </
kintone のカスタマイズビュー に Underscore.js(lodash) の _.template を使うサンプル - Qiita
kintone には ユーザーが独自の一覧画面を作成できる カスタマイズビュー という機能があります。 kintone developer network にも初心者向けから上級者向けまでのチュートリアルが用意されていますが、本当の初心者にはまだまだ理解が難しいと感じています。 今回、kintone developer network にありそうで無かった、Underscore.js の _.template を使ったサンプルを、コードの解説を交えて公開致します。 この段階を理解することは、Vue.jsやReact等の仕組みを理解して使っていく基礎知識では無いかと考えています。 コードに関しては、もっと良い書き方もあるかと思いますので、識者の方のご指摘もお願い致します。 概要 やっていること テーブルが１つだけのシンプルな kintoneアプリを作成 カスタマイズビューを追加 カスタマイズ
Riot Pug Sass Typescriptで楽にWebページ・アプリを開発 (概要編) - Qiita
前提 bashが動く && 動かせる node v8.+ が動く(nodebrew推奨) nodeやnodebrewはこちらの記事が非常に参考になります。 対象 最近の開発環境に触れてみたい方 直接FTPクライアントでサーバー側のファイルをいじってる方 ある程度Webの知識がついてきて、更に何かしたい方 タイトルの開発環境が欲しい方 概要 皆様、現状の開発環境に満足しておられますでしょうか。Webというものは派閥が多く、Angularだ、Reactだなんて言われているご時世ですが、そういったナウいものに手を出すには些か学習コストがかさむことが踏ん切りを邪魔してしまいがちです。 新しくて、便利なものを使っていきたいけど、難しいこと抜きでお願いしますって方は意外と多いのではありませんでしょうか？ そんな方々に朗報！！！！ タグのカッコや綴じタグの呪縛から開放してくれるPug 同上をCSSに持ち
【サーバレス】Firebaseとriotでweb開発を試す - Qiita
レガシーエンジニアがサーバレス+SPAやってみた 普段はLAMP+cakePHP+bootstrapのレガシーエンジニアがサーバレスを試してみました。はたしてJSだけでどこまでできるのか？ サーバレス気になる→Firebaseがイケてるらしい。mBaaSだがwebでもいけるみたい。 React、Angular、Vueはなじめなかった→マイナーだがriotというのが簡単らしい。 bootstrap、jquery止めたい→フロントよくわからないのでひとまずMaterialDesignLite。 LambdaとかCognitoは面倒だった→正直認証とか自動でやって欲しい。 認証、文章と画像の投稿と一覧表示まで適当にサンプル https://newagent-db971.firebaseapp.com/ ゲストユーザー test@test.com/testtest ※デザインとかほぼテンプレのまま
webpackでriotのcssをコンパイルしたい - Qiita
const postcss = require('postcss'); const prefixer = require('autoprefixer')({ browsers: ['last 2 version'] }); module.exports = { // ・・・省略 module: { rules: [ // ・・・ { test: /\.tag$/, exclude: /node_modules/, use: [{ loader: 'riot-tag-loader', options: { hot: 'false', style: 'postcss', parsers: { css: { postcss: (tagName, css) => postcss([prefixer]).process(css).css } } } }] } ] } }; 実行すると以下のエラーが出
Riotでイベントの最中にエレメントを消した場合の挙動 - Qiita
Riot.jsなどのJavaScriptフレームワークを使うと、簡単に要素を出したり消したりできます。ただ、時にはそれでややこしい現象になることもあります。 イベントが…うまく伝わらない Riotで作ったモジュールで、「確認済み - 未確認」の状態を制御するものを作っていました。 確認ボタンは未確認の状態でだけ出る 確認ボタンは<button type='submit'>になっていて、押したら確認フラグをセットしてあとはフォーム送信に任せる というような形となっていました。ところが、この確認ボタンを押すと、確認フラグをセットしてボタンを消す…ところまでは動くのですが、ブラウザによってその後に送信されるかされないかが違ってくる、という状況になってしまいました。 原因 どうやら、「イベントを送ったエレメントをイベント中に削除した場合」にどうなるかが、ブラウザによって違ってくるようでした。あるブ
backboneの基礎の基礎 第1回[サーバからデータ取得せずにローカルで動かす] - Qiita
仕事でbackbone、marionetteをやってます。 jqueryは使った事があったけど、backboneとかのMVCレベルのフレームワークは使った事なかったので、 (JavaとかではstrutsなどのMVCは経験あり)理解するのに手こずりました。 同じような人の理解に役立てれればなぁと思っております。。。 いきなりサーバサイドとの組み合わせでやるとかなり複雑になるなと感じたので、 backboneを基本から簡単に理解できるように数回にわけて書きたいと思います。 まず第1回目として、backboneの一番いいとこといっても過言でないRESTは実装せずに、 ローカルのみで、しかも超簡単な画面を通して、基本的な構成を書きます！ 今回のゴールの画面はこれ フットサルのメンバー紹介サイト。2人のメンバーの名前と生年月日、ポジションがただ表示されているだけの画面。 まぁ、これならHTMLだけで
![backboneの基礎の基礎 第1回[サーバからデータ取得せずにローカルで動かす] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/ee6a648ec3b73534c27dd773e68e1c2c85b8252c/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%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGNzkyMTQlMkZwcm9maWxlLWltYWdlcyUyRjE1MjE5NDIyOTU_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9ZDQzZTIxZDIwOWFiMmNiYWFhNjQ3OWI0NDUzMjNkY2I%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D6e9be90d589536b83ab8b98d2be0958e%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9YmFja2JvbmUlRTMlODElQUUlRTUlOUYlQkElRTclQTQlOEUlRTMlODElQUUlRTUlOUYlQkElRTclQTQlOEUlMjAlRTclQUMlQUMxJUU1JTlCJTlFJTVCJUUzJTgyJUI1JUUzJTgzJUJDJUUzJTgzJTkwJUUzJTgxJThCJUUzJTgyJTg5JUUzJTgzJTg3JUUzJTgzJUJDJUUzJTgyJUJGJUU1JThGJTk2JUU1JUJFJTk3JUUzJTgxJTlCJUUzJTgxJTlBJUUzJTgxJUFCJUUzJTgzJUFEJUUzJTgzJUJDJUUzJTgyJUFCJUUzJTgzJUFCJUUzJTgxJUE3JUU1JThCJTk1JUUzJTgxJThCJUUzJTgxJTk5JTVEJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9ODUyNzYxNTQ3ZDczZDQ0MzI4NWUzNWQxZGEyOTVlMDI%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBuYWthNDYmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz1hNGExOGQzMGJkODcwMDlhNzEzMGMwZDZjM2I0NTUxOQ%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3De43ae9a916aa72f63ac12b70d1c57097)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
underscoreのeachでbreakできないならeveryを使おう - Qiita
gas で Underscore を使いたいとき - Qiita
erb に Lodash.js (or Underscode.js) の _.template を書くときのエスケープ - Qiita
riot.js click demo - Qiita
Laravel Mix に Riot の設定をしたい（少数派） - Qiita
続・Riot.jsの落とし穴まとめ - Qiita
Riot.jsで要素を`each`させると"Uncaught TypeError: Cannot read property 'root' of undefined" - Qiita
riotタグにjsonで連想配列を渡してやるとvalueが消える件 - Qiita
Backbone.MarionetteアプリをBrowserifyでバンドルする(Grunt編） - Qiita
Backbone.MarionetteアプリをBrowserifyでバンドルする(Gulp編） - Qiita
Yeomanのgenerator-backboneを使って開発環境を作ったときの覚書 - Qiita
