MoustacheJS iç içe JSON kısmi kullanılarak

Question

Bıyık bölümlerini kullanarak iç içe (çok düzeyli olabilir) JSON'ı oluşturmaya çalışıyorum. Sadece ikinci seviyeye kadar üçüncü & daha büyük değildir. Tanım gereği kısmi olarak, özyinelemeli olarak kullanılabilir. Yanlış mı yapıyorum? ya da bıyığı kullanarak aynı şeyi elde etmek için başka bir yolu var mı?

JS Bin

Şablon:

<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> 

veri:

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()})); 

Çıkışı (eksik olan ürünler: Nexus 4, Nexus 5, ipod, iphone) MustacheJS sürdürücü dan

Category1 

- Windows 
- Windows Mobile 

Category2 

- SubCategory 1 
- SubCategory 2 

Answer 1

Got the solution,

Çalışma JSBin

hem product-list & recurisve-list benzer çünkü ben sadece product-list şablonu kullanabilirsiniz: $('body').html(Mustache.render(productList.html(), data, {recurse: productList.html()}));

sen olsa da, sen muhtemelen beklemek olmaz bir maximum call stack size exceeded alırsınız bunu yaparsak. Çünkü verilerinizi ve şablonlarınızı yaptığınız şekilde yapılandırarak sonsuz yineleme yarattınız. Kuyruk ürünlerinde (Nexus 4, Nexus 6, iPod, vb.) Şablon, bir product mülkünü arar ve bulamaz. Dolayısıyla, bağlam yığınını geriye doğru yürüyecek ve product özelliği ile bir şey bulana kadar her seviyeyi kontrol edecektir. Yaprak ürünlerinin false, null or [] gibi bir değere sahip product özelliğine sahip olduğundan emin olarak bunu durdurabilirsiniz.

Yeni Veri:

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 
       }] 
      }] 
     }] 
    };