renderowanie w Wąsy JS zagnieżdżone JSON przy użyciu częściowych

Question

Próbuję renderować mój zagnieżdżony (może być wiele poziomów) JSON przy użyciu częściowych wąsów. Renderuje tylko do drugiego poziomu, a nie trzeciorzędnego. Zgodnie z definicją częściowe mogą być używane do renderowania rekursywnie. Czy robię to źle? czy jest jakiś inny sposób na osiągnięcie tego samego przy użyciu wąsów?

JS Bin

Szablon:

<script id="product-list" type="x-tmpl-mustache"> 
    <ul class='products'> 
    {{#product}} 
     <li class='product'> {{ productName }} </li> 
     {{> recurse }} 
    {{/product}} 
    {{^product}} 
     <li class='empty'> No products Available </li> 
    {{/product}} 
    </ul> 
</script> 

<script id="recursive-list" type="x-tmpl-mustache"> 
    <ul class='products'> 
    {{#product}} 
     <li class='product'> {{ productName }} </li> 
    {{/product}} 
    </ul> 
</script> 

danych:

var data = { 
    product: [{ 
     productName: "Category1", 
     product: [{ 
      productName: "Windows" 
     }, { 
      productName: "Windows Mobile" 
     }] 
    }, { 
     productName: "Category2", 
     product: [{ 
      productName: "SubCategory 1", 
      product: [{ 
       productName: "Nexus 4" 
      }, { 
       productName: "Nexus 6" 
      }] 
     }, { 
      productName: "SubCategory 2", 
      product: [{ 
       productName: "ipod" 
      }, { 
       productName: "iphone" 
      }] 
     }] 
    }] 
}; 

Rendering:

$('body').html(Mustache.render(productList.html(), data, {recurse :recursiveList.html()})); 

Output (brakujące produkty: Nexus 4, Nexus 5, iPod, iPhone)

Category1 

- Windows 
- Windows Mobile 

Category2 

- SubCategory 1 
- SubCategory 2 

Answer 1

Got the solution z MustacheJS opiekuna,

robocza JSBin

mogę po prostu użyć product-list szablon ponieważ zarówno product-list & recurisve-list są podobne: $('body').html(Mustache.render(productList.html(), data, {recurse: productList.html()}));

Jeśli to zrobisz, chociaż, dostaniesz się maximum call stack size exceeded, który zapewne nie spodziewał. Dzieje się tak dlatego, że poprzez strukturyzację danych i szablonów w taki sposób, w jaki stworzyłeś, stworzyłeś nieskończoną rekursję. W produktach typu tail (takich jak Nexus 4, Nexus 6, iPod itp.) Szablon będzie szukał właściwości product i nie będzie go znajdował. Więc będzie spacerować z powrotem stosu kontekstu i sprawdzać każdy poziom, aż znajdzie coś z właściwością product. Możesz to zatrzymać, upewniając się, że produkty z liści mają właściwość product o wartości podobnej do false, null or [].

Nowa danych:

var data = { 
     product: [{ 
      productName: "Category1", 
      product: [{ 
       productName: "Windows", 
       product: null 
      }, { 
       productName: "Windows Mobile", 
       product: null 
      }] 
     }, { 
      productName: "Category2", 
      product: [{ 
       productName: "SubCategory 1", 
       product: [{ 
        productName: "Nexus 4", 
        product: null 
       }, { 
        productName: "Nexus 6", 
        product: null 
       }] 
      }, { 
       productName: "SubCategory 2", 
       product: [{ 
        productName: "ipod", 
        product: null 
       }, { 
        productName: "iphone", 
        product: null 
       }] 
      }] 
     }] 
    };