如何在Observable文档中使用输入值计算并正确展示结果？

问题原因 #

在Observable中，view(Inputs.range())返回的是响应式信号（Signal），直接写const x2 = 2 * x只会计算一次初始值，无法追踪x的后续变化；同时直接在markdown段落里写${x}无法正确绑定信号的动态值，导致x2无法实时更新展示。

修复步骤 #

1. 将x2改为响应式计算
   有两种常用实现方式：

   • 方式一：用Observable的$订阅函数，自动追踪x的变化：

     const x = view(Inputs.range());
     console.log("x", x);
     const x2 = $ => 2 * $(x); // 订阅x的信号，返回实时计算的2*x值
     

   • 方式二：调用信号的map方法生成新的响应式信号：

     const x = view(Inputs.range());
     console.log("x", x);
     const x2 = x.map(value => 2 * value); // 映射x的每个值得到对应的x2
     

2. 正确渲染动态值
   不能直接用静态markdown段落，需要用Observable的html函数创建响应式元素，把这段内容放在代码单元格中：

   html`<p>Here is x: ${x}. Here is x2: ${x2}</p>`
   

修改完成后，拖动range控件改变x的值时，x2会自动计算并实时更新展示。

内容的提问来源于stack exchange，提问作者dfrankow