more with nested templates

[Stacey]

I have used this before, and it worked, but for some reason it is ceasing to out of nowhere. I have a situation where I am using nested templates like this ...

using the following model, this doesn't display the second level results, for some reason. But SOMETIMES it does. I cannot reproduce the behavior consistently.

{
  "Id": null,
  "Name": "Test Item",
  "Prototypes": [
    {
      "Id": "items/prototypes/shield",
      "Name": "Shield",
      "Mutations": [
        {
          "Name": "Shield",
          "Measurement": 4,
          "Statistic": {
            "Id": "statistics/damage-reduction-physical",
            "Name": "Damage Reduction/Physical"
          }
        },
        {
          "Name": "Shield",
          "Measurement": 15,
          "Statistic": {
            "Id": "statistics/health",
            "Name": "Health"
          }
        }
      ],
      "Consumable": false,
      "Equipable": true,
      "Tags": [
        {
          "Id": "tags/shielding",
          "Name": "Shielding",
          "Description": "This  is capable of somehow shielding the user, either with mitigation or abilities"
        }
      ]
    }
  ]
}

<div
     data-role="listview"
     style="margin: 0px;"
     data-template="templates-admin-inherited-prototypes"
     data-bind="source: Prototypes"></div>

<script type="text/html" id="templates-admin-inherited-prototypes">
    <h2 data-bind="text: Name"></h2>
    <div
         data-template="templates-admin-inherited-mutation"
         data-bind="source: Mutations"></div>

</script>

<script type="text/html" id="templates-admin-inherited-mutation">
    ${ Statistic.Name }
</script>

[Petyo]

Hello Stacey,

I reproduced the problem you describe in the following jsbin. The issue is related to the MVVM bound template having multiple root elements (h2 and div). Wrapping the template contents in a single element resolved the problem. 

Regards,
Petyo
Telerik