javascript - 无法在 Handlebars 内填充字段 if 语句

Question

我有一个模态框，里面有一些字段，根据其他字段中的一些值，它们可能会出现也可能不会出现。

所以字段看起来像

<div class="row">
  <select class="form-control" id="ddlNewInputType" placeholder="Enter your input type">
    <option value="input">Input</option>
    <option value="formula">Formula</option>
  </select>
</div>


{{#if isFormula }}
  <div class="row">
    <input type="text" id="txtNewInputFormula" placeholder="Enter formula">
  </div>
{{/if}}

有一个帮助程序可以确定是否显示 txtNewInputFormula 文本框

isFormula: ->
  return Template.instance().isFormula.get();

isFormula 是一个 ReactiveVar，它会在下拉列表更改时填充

'change #ddlNewInputType': (e,t) ->
  isFormula = $(e.currentTarget).val() == 'formula'
  t.isFormula.set(isFormula);

实际上，规则是如果输入类型 = 输入，则不显示公式字段，如果输入类型 = 公式，则显示公式字段。

当我的模式框加载时，它要么用于新对象，要么用于现有对象。如果它是现有对象，我会像这样用数据库中的值预填充模态框

'click #btnEditInput': ->
    $('#addInputModal').modal()
    $('#txtNewInputName').val(this.name)
    $('#txtNewInputFormula').val(this.formula)
    $('#ddlNewInputType').val(this.inputType)
    $('#ddlNewInputType').change()

问题是除了 txtNewInputFormula 之外的每个字段都被填充了。我怀疑 txtNewInputFormula 没有被填充，因为它在 handlebar if 语句内并且尚未被评估，因此 HTML 元素不存在。

我该如何解决这个问题？如何在 IF 语句中填充 HTML 元素？

Answer 1

您的诊断可能是正确的，您是否尝试过使用 handlebars 语法用适当的数据 react 性地填充输入文本值？

像这样:

{{#if isFormula }}
  <div class="row">
    <input type="text" id="txtNewInputFormula" placeholder="Enter formula" value="{{formula}}">
  </div>
{{/if}}

无论最终创建 DOM 元素的时间如何，将输入值设置为响应式助手都会对其进行设置。

一般来说，当您发现自己操纵 jQuery 修改 DOM 并绕过 Blaze 时，您可能会遇到麻烦。