在页面加载时从数据库中设置DecimalRangeField值

Question

我用的是烧瓶和DecimalRangeField。当我将现有记录加载到表单中时，我希望将范围滑块设置为数据库中的值。

我的表格看起来是：

downtime = DecimalRangeField(label='Outage/Downtime (hours)',
                             render_kw={"value": "0",
                                        "max": "5",
                                        "step": "0.5",
                                        "style": "--min: 0; --max: 5; --val: 0"
                                        },
                             )

这是一个很好的滑块。呈现的HTML是：

<input id="downtime" max="5" name="downtime" step="0.5" style="--min: 0; --max: 5; --val: 0" type="range" value="0">
<label id="outage_slider_label">0</label>

我可以使用它并将值与表单的其余部分一起保存到我的数据库中。但是，当我加载该记录并尝试让它使用一些javascript显示滑块值时，它不起作用。

我在我的“get”路径中从数据库中加载数据，如下所示：

form.downtime.data = change.downtime
print(f'downtime {form.downtime.data}')

例如，如果我将6保存到我的db，它就会检索正确的值，如print语句所示。

然后，我希望使用一些javascript将滑块设置为正确的位置，并将其显示在滑块标签中。但当我做的时候

let downtime_slider = document.getElementById('downtime')
console.log(downtime_slider.value)

它显示0，而不是6(或任何来自db的值)。

为何会这样呢？

Answer 1

我用一些jinja2魔法弄明白了这一点。

我把修改过的模板放在：

<div class="ms-3">
  {{ form.downtime.label(class="form-label") }}
  {% if form.downtime.data %}
    {% set downtime_value = form.downtime.data %}
  {% else %}
    {% set downtime_value = 0 %}
  {% endif %}
  <div class="hstack gap-2">
    {{ form.downtime(class="range-slider", value=downtime_value) }}
    <label id="outage_slider_label">{{ downtime_value }}</label>
  </div>
</div>

现在，当页面加载滑块集时，从记录的数据库中将滑块设置到正确的位置。如果没有数据(即它是一个新记录)，则该值被设置为0。

快乐的日子！