jsRender empty object vs empty array

by sp00n82

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/1.0.2/jsrender.min.js"></script>
<div id="result-1">
  <h3>Mixed data</h3>
</div>
<div id="result-2">
  <b>Directly passed a filled array:</b>
</div>
<div id="result-3">
  <b>Directly passed an empty array:</b>
</div>
<div id="result-4">
  <b>Directly passed an empty object:</b>
</div>

<script id="template-1" type="text/x-jsrender">
<b>{{:title}}</b>
<ul>
  {{for members}}
    <li><b>Name:</b> {{:name}}</li>
  {{else}}
    <li>No members!</li>
  {{/for}}
</ul>
</script>

<script id="template-2" type="text/x-jsrender">
<ul>
  {{for #data}}
    <li><b>Name:</b> {{:name}} </li>
  {{else}}
    <li>No members!</li>
  {{/for}}
</ul>
</script>

CSS

div {
  padding: 0.5em;
  margin: 1em;
  background-color: #EFEFEF;
  border: 1px solid black;
}

h3 {
  margin: 0;
}

JavaScript

var data_mixed = [
  {
    "title": "A filled 'members' array:",
    "members": [
      {
        "name": "Pete"
      },
      {
        "name": "Not Pete"
      },
    ]
  },

  {
    "title": "An empty 'members' array:",
    "members": []
  },
  
  {
    "title": "No 'members' property at all:",
  },
  
  {
    "title": "'members' is an empty object:",
    "members": {}
  },
];

// Filled array
var array_filled = [
  {
    "name": "Pete"
  },
  {
    "name": "Not Pete"
  },
];

// Empty array
var array_empty = [];

// Empty object
var object_empty = {};

var template1 = $.templates("#template-1");
var template2 = $.templates("#template-2");

var htmlOutput1 = template1.render(data_mixed);
var htmlOutput2 = template2.render(array_filled);
var htmlOutput3 = template2.render(array_empty);
var htmlOutput4 = template2.render(object_empty);

$("#result-1").append(htmlOutput1);
$("#result-2").append(htmlOutput2);
$("#result-3").append(htmlOutput3);
$("#result-4").append(htmlOutput4);