Moustache + đối tượng lồng nhau

Question

Tôi đang cố gắng tạo một cây từ danh sách các thẻ có thẻ bên trong chúng.

Dưới đây là một mẫu của các JSON Tôi đang sử dụng:

{ 
    "tags": 
    [{"name":"My first tag", 
    "tags": 
    [{"name":"My first tag inside a tag"}, 
    {"name":"My second tag inside a tag"}] 
    }] 
} 

Nếu tôi sử dụng mẫu ria mép sau, nó sẽ hiển thị "tag đầu tiên của tôi" mà không cần bất kỳ vấn đề:

<ul> 
{{#tags}} 
<li tag-id="{{id}}"> 
    {{name}} 
</li> 
{{/tags}} 
</ul> 

Nhưng sau đó , bằng cách sử dụng mẫu sau, tôi đang cố gắng hiển thị các thẻ bên trong thẻ đầu tiên này:

<ul> 
{{#tags}} 
<li tag-id="{{id}}"> 
    {{name}} 
    <div> 
    {{#tags}} 
    <a>{{name}}</a> 
    {{/tags}} 
    </div> 
</li> 
{{/tags}} 
</ul> 

Sử dụng mẫu này, Mustache không hiển thị bất kỳ thứ gì.

Làm cách nào để hiển thị danh sách lồng nhau bằng Mustache?

Answer 1

Để giải quyết vấn đề đó, tôi sẽ làm:

<div id="result-tag"></div> 
<script language="javascript" type="text/javascript"> 
    function test(){ 
    var view = { 
    "tags": 
    [{"name":"My first tag", 
     "tags": 
     [{"name":"My first tag inside a tag"}, 
     {"name":"My second tag inside a tag"}] 
    }] 
    }; 

    var templt = '<ul>{{#tags}}<li>{{name}}<div>{{>subtags}}</div></li>{{/tags}}</ul>'; 
    var partials = {"subtags": "{{#tags}}<a>{{name}}</a><br/>{{/tags}}"}; 
    var html = Mustache.to_html(templt, view, partials); 
    document.getElementById('result-tag').innerHTML=html; 
} 
window.onload = test; 
</script> 

Tôi hy vọng rằng sẽ giúp