如何自定义Dashing Widget：从dashing generate widget到onData数据绑定实战

如何自定义Dashing Widget：从dashing generate widget到onData数据绑定实战

【免费下载链接】dashingThe exceptionally handsome dashboard framework in Ruby and Coffeescript.项目地址: https://gitcode.com/gh_mirrors/da/dashing

Dashing 是一个基于 Sinatra 的 Ruby 大屏仪表盘框架，它的核心玩法就是自定义 Widget：一条dashing generate widget命令生成组件骨架，再用onData回调完成数据绑定，就能把实时数据漂亮地呈现到大屏上。本文带你从零走完这条最短路径 🚀

1️⃣ Dashing Widget 是什么？

在 Dashing 中，Widget 是仪表盘的最小展示单元：数字、图表、列表、时钟都是 Widget。每个 Widget 由三个文件组成：

框架自带了 number、text、graph、list 等示例，可以照着学。

2️⃣ 一键生成 Widget：dashing 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 class="title">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 }) end

5️⃣ 把 Widget 放上仪表盘

最后一步，在dashboards/的 ERB 页面里加一个<li>格子，参考 sample.erb：

<li>dashing start

6️⃣ 常见问题速查

• 改了 Widget 不生效？浏览器强制刷新（Ctrl+Shift+R），并确认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