docs: explain event binding and object lifecycle examples

examples/visual-protocols.endor

@@ -2,6 +2,7 @@
 // onMount 作为业务阶段收集结果；实际布局/绘制计算仍受只读规则约束。
 // 把协议探测结果保存到普通业务字段，textOf 将其中一部分显示出来。
 class VisualResults {
+    // width/height 来自测量返回值，childX/childY 来自安排返回值，color 来自新绘制命令；都不是最终 Mount 的几何快照。
     width: Number
     height: Number
     childX: Number
@@ -13,10 +14,13 @@ class ProbeRect: RectBlock {
     results: VisualResults
     // 有限最大宽 120 约束自然宽 200；另用自定义 Bounds 查询绘制颜色，把返回结果写进共享 results。
     function onMount(self: ProbeRect, mount: Mount): Unit {
+        // 宿主挂载通知进入此业务回调，允许写 results；这里主动调用继承的原生 measure 来查询指定约束下的结果。
         measured = self.measure(mount, Constraints(0, 0, 120, 80))
         self.results.width = measured.width
         self.results.height = measured.height
+        // 自定义 Bounds 仅作为这次 paint 的输入，不会把当前页面里 rect 的实际布局强制设为该位置和大小。
         drawing = self.paint(mount, Bounds(12, 18, 200, 60))
+        // 第一个命令来自 RectBlock 的原生矩形绘制，本例读取颜色后保存到业务模型供下方 textOf 展示。
         self.results.color = drawing.commands.at(0).color
     }
 }
@@ -25,6 +29,7 @@ class ProbeColumn: Column {
     results: VisualResults
     // 给定绝对起点(20,30)及容器范围，原生 padding=24 使首子项位于(44,54)。
     function onMount(self: ProbeColumn, mount: Mount): Unit {
+        // 当前父出现的子槽已存在，at(0) 对应下面 root 的标题 TextBlock；查询结果不替换宿主随后发布的最终安排。
         positions = self.arrange(mount, Bounds(20, 30, 500, 300))
         self.results.childX = positions.children.at(0).x
         self.results.childY = positions.children.at(0).y
@@ -32,6 +37,7 @@ class ProbeColumn: Column {
 }
 // 先创建结果容器，再将它作为源子类字段共享；root 的最后一个参数是该字段，不是视觉子项。
 results = VisualResults(0, 0, 0, 0, "等待挂载")
+// 父 ProbeColumn 与子 ProbeRect 共享同一结果容器，分别填写自己的探测字段，避免把结果误写到原生宽高载荷。
 rect = ProbeRect(200, 60, 12, "#DDEEFF", results)
 root = ProbeColumn(24, 16, TextBlock("对象的原生视觉协议", 2), rect, TextBlock("约束测量宽度"), ui.textOf(results, "width"), TextBlock("绘制颜色"), ui.textOf(results, "color"), results)
 page = Page()