JsRender - 检查嵌套值是否为空

Question

想象一下，在 web 应用程序的 header 中使用 jsrender 显示用户的姓名和姓氏。我将一个对象传递给模板，该对象是“用户”对象。然后在模板中显示 {{name}} 和 {{surname}}。但是，如果“用户”对象为空或未定义，我如何检查模板内部呢？我只能检查 name 或 surname 是否为 null(或空)。

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

如果我在模板中使用“{{If shipping.id}}”，我总是会收到此错误:{错误:TypeError:无法读取 null 的属性“id”}看起来 shipping 是空的，即使它不是

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

谢谢

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=...在 {{:}} 上标记以指定错误情况下标记的回退呈现。

例如，如果你想在运输对象为 null 或未定义时呈现空字符串，你可以使用模板:

{{: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 no shipping info
2 no shipping info
3 no shipping info
4
5 no shipping info

最后，如果订单本身为 null 或未定义，或者如果您传递一个订单数组，但有些订单可能未定义，那么您可以用 {{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
no order
no shipping info
J2