如何自定义Dashing Widget从dashing generate widget到onData数据绑定实战【免费下载链接】dashingThe exceptionally handsome dashboard framework in Ruby and Coffeescript.项目地址: https://gitcode.com/gh_mirrors/da/dashingDashing 是一个基于 Sinatra 的 Ruby 大屏仪表盘框架它的核心玩法就是自定义 Widget一条dashing generate widget命令生成组件骨架再用onData回调完成数据绑定就能把实时数据漂亮地呈现到大屏上。本文带你从零走完这条最短路径 1️⃣ Dashing Widget 是什么在 Dashing 中Widget 是仪表盘的最小展示单元数字、图表、列表、时钟都是 Widget。每个 Widget 由三个文件组成文件作用xxx.html模板结构用data-bind声明绑定槽位xxx.coffee逻辑层继承Dashing.Widget处理数据xxx.scss样式按widget-xxx类名隔离框架自带了 number、text、graph、list 等示例可以照着学。2️⃣ 一键生成 Widgetdashing generate widget 完整步骤在仪表盘项目根目录执行dashing generate widget buzzwords命令由 cli.rb 中的generate任务驱动它会以 templates/widget 为模板在widgets/下创建三个文件对应模板分别是结构模板%name%.html逻辑模板%name%.coffee.tt样式模板%name%.scss.tt生成的 Coffee 文件里已经内置了onData回调这就是数据绑定的入口class Dashing.Buzzwords extends Dashing.Widget ready: - # 组件渲染完成时触发 onData: (data) - # 每次收到 Job 推送的数据都会执行这里 # 可用 $(node) 操作组件的 DOM 节点 小技巧node指向组件 HTML 根节点$(node).fadeOut().fadeIn()就能让组件在每次数据到达时闪一下。3️⃣ 用 onData 完成数据绑定的两种姿势姿势一data-bind声明式绑定推荐新手在 HTML 里写好插槽数据到了自动填充。参考 text 组件模板h1 classtitle>dashing generate job buzzwords生成的文件基于 Job 模板核心就是调度器 事件推送SCHEDULER.every 1m, :first_in 0 do |job| send_event(widget_id, { }) end关键在send_event第一个参数是 Widget 的data-id第二个参数就是 Widget 里onData收到的data。官方示例 sample.rb 每 2 秒推送一次随机估值数据SCHEDULER.every 2s do send_event(valuation, { current: current_valuation, last: last_valuation }) end5️⃣ 把 Widget 放上仪表盘最后一步在dashboards/的 ERB 页面里加一个li格子参考 sample.erbli>dashing start6️⃣ 常见问题速查改了 Widget 不生效浏览器强制刷新CtrlShiftR并确认data-view类名与 Coffee 类名一致。数据没到 onData检查 Job 的send_event参数与data-id是否完全相同。想换端口dashing start -p 8080见 CLI start 命令。想安装别人分享的 Widget使用dashing install GIST_ID支持--skip跳过覆盖。写在最后自定义 Dashing Widget 的完整链路其实就四步generate widget → 写 contenteditable="false">【免费下载链接】dashingThe exceptionally handsome dashboard framework in Ruby and Coffeescript.项目地址: https://gitcode.com/gh_mirrors/da/dashing创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考