如何基于if条件在JsRender模板中添加HTML并控制内容显示？

哦，这个问题我太懂了！你完全不用等到模板渲染完成后再去DOM里找元素做判断——JsRender本身就支持内置的条件语法，直接在模板里写逻辑就行，这样既避免了找不到元素的报错，代码也更简洁。

你只需要修改#Accounttmpl模板，把原来的隐藏Test元素换成{{if}}条件块，就能实现当Verified值为'false'时显示“not verified”的需求。修改后的模板代码如下：

<script id="Accounttmpl" type="text/x-jsrender">
  <div class="authenticated" id="authenticated" >
    <span class="loginWelcome">Hi </span>
    <span class="loginWelcome">{{>FirstName}}</span>
    <!-- 新增的条件判断逻辑 -->
    {{if Verified === 'false'}}
      <span class="not-verified">not verified</span>
    {{/if}}
  </div>
</script>

关键点说明： #

• JsRender的{{if}}语法可以直接在模板里进行逻辑判断，渲染时会根据数据动态生成对应的DOM元素，不用再手动操作DOM。
• 注意这里判断的是字符串'false'，因为你原来的模板里写的是{{>(Verified)}}，看起来Verified是字符串类型；如果你的Verified是布尔值false，可以把判断改成{{if !Verified}}。
• 如果需要在Verified为true时显示其他内容，还可以添加{{else}}块扩展逻辑：

  {{if Verified === 'false'}}
    <span class="not-verified">not verified</span>
  {{else}}
    <span class="verified">already verified</span>
  {{/if}}
  

这样修改后，当你调用模板渲染时，JsRender会自动根据Verified的值决定是否显示“not verified”提示，完全不需要在Success回调里去查找DOM元素，也就不会出现找不到元素的报错了。

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