Nested Template issue from AJAX call.

15 views

Skip to first unread message

rlyn...@hotmail.com

unread,

Mar 27, 2015, 12:40:35 PM3/27/15

to knock...@googlegroups.com

When I return the JSON directly into the page from server side code the templates work, however the same data being returned from an Ajax call will only loop thru the first level and not pickup on the Nested data.

It is only the top level binding that seem to be getting picked up and the call for the foreach on "SubMenu" isn't being picked up.

Templates:

<div class="menu departments">
     <h4 id="test">Departments</h4>
        <ul id="ulRootMenu" data-bind="template: {name:'mnuRoot', foreach: viewMenu}">loading...</ul>
 </div>
<script type="text/html" id="mnuRoot">
  <li data-bind="attr:{class:LiClass}">
      <a data-bind="text: LinkText, attr:{class:LiClass, href:LinkHref}"></a>
      <ul  data-bind="template: {name:'l2', foreach: SubMenu}, attr:{class: UlClass}"></ul>
 </li>
</script>
<script type="text/html" id='l2'>
  <li data-bind="attr:{class: LiClass}"><a  data-bind="    text: LinkText,attr:{href:LinkHref}"></a>    
  <ul  data-bind="template: {name:'l2', foreach: SubMenu}, attr:{class: UlClass}"></ul>
  </li>
</script>
</div>

Json Snippit (only one root item, but two "SubMenu" items each with two "SubMenu" items.)

[{
 "LinkText": "Furniture",
 "LinkHref": "/Catalog/Department.aspx?Dimension=1000\u0026DimensionValue=10001",
 "LinkTitle": "Navigate to: Furniture",
 "LiClass": "top-level level0 parent",
 "UlClass": "submenu level1",
 "HasChildren": true,
 "SubMenu": [{
  "LinkText": "Accent Furniture",
  "LinkHref": "/Catalog/Category.aspx?Dimension=10001\u0026DimensionValue=11004",
  "LinkTitle": null,
  "LiClass": "level1 parent",
  "UlClass": "submenu level2",
  "HasChildren": true,
  "SubMenu": [{
   "LinkText": "Accent Chest",
   "LinkHref": "/Catalog/Category.aspx?Dimension=11004\u0026DimensionValue=11005",
   "LinkTitle": null,
   "LiClass": "level3",
   "UlClass": null,
   "HasChildren": false,
   "SubMenu": null
  },
  {
   "LinkText": "Accent Tables",
   "LinkHref": "/Catalog/Category.aspx?Dimension=11004\u0026DimensionValue=11006",
   "LinkTitle": null,
   "LiClass": "level3",
   "UlClass": null,
   "HasChildren": false,
   "SubMenu": null
  }]
 },
 {
  "LinkText": "Bedroom",
  "LinkHref": "/Catalog/Category.aspx?Dimension=10001\u0026DimensionValue=10259",
  "LinkTitle": null,
  "LiClass": "level1 parent",
  "UlClass": "submenu level2",
  "HasChildren": true,
  "SubMenu": [{
   "LinkText": "Accent Mirrors",
   "LinkHref": "/Catalog/Category.aspx?Dimension=10259\u0026DimensionValue=10959",
   "LinkTitle": null,
   "LiClass": "level3",
   "UlClass": null,
   "HasChildren": false,
   "SubMenu": null
  },
  {
   "LinkText": "Armoires",
   "LinkHref": "/Catalog/Category.aspx?Dimension=10259\u0026DimensionValue=10260",
   "LinkTitle": null,
   "LiClass": "level3",
   "UlClass": null,
   "HasChildren": false,
   "SubMenu": null
  }]
 }]
}]

JS that calls webservice and returns the JSON..

<script type="text/javascript">
 GetMenu(); //Call the Function which gets all records using ajax call
 var viewMenu;
 function GetMenu() {                 
   $.ajax({
    type: "GET",
    url: "/Services/NavigationMenuService.asmx/GetNavigationMenu",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: OnMenuSuccess,
    error: function (error) {
     alert(error.status + "<--and--> " + error.statusText);
    }
  }); 
 }
 function OnMenuSuccess(data)
 {
  var d = JSON.parse(data.d);
  viewMenu = ko.observableArray(d);           
  ko.applyBindings(viewMenu, document.getElementById("ulRootMenu"));
 }

 </script>