JsRender - 检查嵌套值是否为空

Question

想象一下，在 webapp 的标头内显示 jsrender 用户的姓名和姓氏。我将一个“用户”对象的对象传递给模板。然后在模板中显示 {{name}} 和 {{surname}}。但是，如果“用户”对象为空或未定义，我如何检查模板内部？我只能检查 name 或 surname 是否为 null（或为空）。

检查空值的正确方法是什么？ 例如，一个对象 'Order' 与另一个具有 'id' 和 'name' 属性的嵌套对象 'Shipping'。 Shippinig 对象存在且不为空，但其属性为空。

如果我在模板中使用“{{If shipping.id}}”，我总是会收到以下错误： {错误：TypeError：无法读取 null 的属性“id”} 即使不是，似乎运费也是空的

当返回的对象为空时（例如，当搜索没有返回结果时），这也应该很有用，并且我想显示一个模板而不是另一个

谢谢

Answer 1

假设你有：

var html = myTemplate.render(myOrder);

你的模板是：

{{:shipping.id}}

以下是myOrder 不同版本的结果：

• myOrder = {shipping: {name: "Jo", id: "J1"} }

  -> html："J1

• myOrder = {shipping: {name: "Jo"} }

  -> html：""

• myOrder = {}

  -> html："{Error: TypeError: Unable to get property 'id' of undefined or null reference}"

所以现在，这里有几种方法可以处理最后一种情况 - 不输出错误消息：

1) 在{{:}} 标签上使用onerror=... 来指定标签在出错时的后备渲染。

例如，如果要在运输对象为空或未定义时呈现空字符串，则可以使用模板：

{{:shipping.id onerror=''}}

或者你可以写

{{:shipping.id onerror='no shipping info'}}

2) 使用{{if}} 或{{if}} {{else}} {{/if}} 测试运输对象

{{if shipping}}{{:shipping.id}}{{else}}no shipping info{{/if}}

3)使用{{for}}或{{for}} {{else}} {{/for}}

{{for shipping}}{{:id}}{{else}}no shipping info{{/for}}

4)使用空检查

{{:shipping && shipping.id}}

5)使用三元表达式

{{:shipping ? shipping.id : 'no shipping info'}}

总而言之，这是一个展示所有这些替代方案的模板：

模板

<script id="myTmpl" type="text/x-jsrender">
    1 {{:shipping.id onerror='no shipping info'}}<br/>
    2 {{if shipping}}{{:shipping.id}}{{else}}no shipping info{{/if}}<br />
    3 {{for shipping}}{{:id}}{{else}}no shipping info{{/for}}<br />
    4 {{:shipping && shipping.id}}<br />
    5 {{:shipping ? shipping.id : 'no shipping info'}}<br />
</script>

脚本

var myOrder = {};
var html = myTemplate.render(myOrder);

输出：

1 没有送货信息
2 没有送货信息
3 没有 送货信息
4
5 没有送货信息

最后，如果订单本身为空或未定义，或者如果您传递了一个订单数组，但其中一些可能未定义，那么您可以用{{if #data}} 或等效地简单{{if}} 包装整个模板，这会测试当前对象（您正在渲染此模板的上下文数据对象）是否为空。

模板

<script id="myTmpl" type="text/x-jsrender">
    {{if}}
        {{:shipping.id onerror='no shipping info'}}<br/>
    {{else}}
        no order<br/>
    {{/if}}
</script>

脚本

var myOrders = [
  {shipping: {id: "J1"}},
  ,
  {},
  {shipping: {id: "J2"}},
];

var html = myTemplate.render(myOrders)

输出：

J1
无订单
无发货信息
J2