templ 组件需手动触发 render 更新 html，因其无响应式系统；状态变更后必须显式调用 render()，并配合 store.subscribe() 订阅更新，且首次加载需手动执行一次；data-* 属性仅用于初始化，不可作运行时状态源；hidden 和 class 是唯一可靠驱动视图更新的属性。
templ 组件里怎么让状态变更触发 HTML 更新
templ 模板本身不自动响应状态变化，必须靠手动 render + 订阅机制驱动 DOM 更新。它不像 React 或 Vue 那样有响应式系统，所有状态变更后都要显式调用渲染逻辑。
常见错误现象：counts(global, session int) 函数里改了 global 值，但页面上的 <span id="count"></span> 没变；或者表单提交后服务端返回新值，客户端没主动刷新视图。
- 每次状态变更（比如用户点击、API 返回）后，必须调用一次
render()函数，把最新store.getState()映射到对应 DOM 节点 -
render()里别用innerHTML全量重写，优先用textContent或value属性更新具体字段，避免事件监听器丢失 - 在
store.subscribe()中绑定render，但注意首次加载时也要手动调一次，否则初始值不显示 - 如果 templ 组件嵌套在 SSR 输出中，需确保客户端初始化时读取的是服务端吐出的初始 state，而不是空对象或默认值
data-* 属性在 templ 渲染中该不该当状态源用
不该。data-* 只适合传初始化参数，不能作为运行时状态载体——templ 渲染后，HTML 上的 data-count 不会随 JS 状态变化而自动更新，JS 也不会监听它变化。
常见错误现象：SSR 输出 <div data-count="5"></div>，客户端 JS 把 count 改成 6 后，el.dataset.count 还是 "5"；或者用 el.setAttribute('data-count', '6')，但 templ 模板根本没订阅这个变更。
- 初始化时可读取
el.getAttribute('data-count')转成数字存入全局 state，之后完全丢掉这个 attribute - 结构化数据如
data-config='{"theme":"dark"}'必须用JSON.parse(el.getAttribute('data-config')) || {}，且包try/catch - 避免在 templ 模板里动态插值
data-属性，比如<div data-id="{{item.id}}">，容易和服务端初始值冲突导致 diff 错乱<h3>如何让 templ 组件与 Redux store 同步更新</h3> <p>没有自动绑定，得靠两层手动桥接：一是在 store 变更时触发 templ 的 render，二是把用户交互事件映射为 action dispatch。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p>常见错误现象：点击按钮调了 <code>store.dispatch({ type: 'INCREMENT' })，但 templ 模板没重绘；或者表单输入直接改了 DOM value，却没触发任何 action，导致 store 和视图长期脱节。- 在
store.subscribe()回调里调用 templ 的render()，确保每次 state change 都走一遍输出流程 - 给 templ 模板里的交互元素（如
<button hx-post="/api/inc"></button>）加事件监听，阻止默认行为，改为dispatch() - 不要在 templ 模板里写内联 JS 或
onclick，所有状态变更必须经过 store，否则难以追踪和测试 - 如果用了
hx-post这类 htmx 功能，需确认它是否绕过 store —— 若是，则要手动在 success 回调里 dispatch action
hidden 和 class 是唯一能可靠驱动 templ 视图更新的 HTML 属性
templ 模板不解析自定义属性，也不监听 dataset 变化，只有浏览器原生支持的布尔属性（如
hidden）和类名变更（class）能直接触发重绘，且不会因 JS 和 HTML 不同步而失灵。常见错误现象：用
el.setAttribute('data-loading', 'true')控制加载态，但 CSS 没生效；或者el.className = 'loading'覆盖了其他 class 导致样式错乱。- 显隐控制一律用
el.hidden = true/false，别碰setAttribute('hidden', '')—— property 和 attribute 容易不同步 - 多状态 UI（如 loading / error / success）用
el.classList.toggle('state-loading')切换，配合 CSS 的.state-loading .spinner规则 - 避免用
title、lang或自定义data-类属性控制显示逻辑，它们不触发重绘，只影响辅助技术
复杂点不在 templ 语法，而在“谁持有 truth”。哪怕模板再简洁，只要状态源头分散在 localStorage、URL 参数、DOM attribute 和 store 四处，同步就注定断裂。最容易被忽略的是：首次渲染时没把服务端初始 state 注入 store，导致客户端 render 出来全是默认值。
- 在
