Handlebars.js: Sử dụng một phần giống như mẫu bình thường, đầy đủ

Question

Tôi có một mẫu mà tôi muốn sử dụng cả một phần, và tự nó từ javascript.

Answer 1

Nếu mẫu của bạn được biên dịch sẵn, bạn có thể truy cập vào partials của bạn thông qua Handlebars.partials['partial-name']() cũng như gọi cho họ từ một mẫu qua {{> partial}} helper.

Điều này thật tuyệt vì bạn có thể viết một hàm tiện ích để hiển thị mẫu cho dù đó là mẫu toàn bộ hoặc một phần.

ví dụ:

function elementFromTemplate(template, context) { 
    context = context || {}; 
    var temp = document.createElement('div'); 
    temp.innerHTML = templates[template] ? templates[template](context) : Handlebars.partials[template](context); 
    return temp.firstChild; 
} 

myDiv.appendChild(elementFromTemplate('myPartial', context));

myDiv.appendChild(elementFromTemplate('a-whole-template'));

Hope this helps bất kỳ ai khác muốn sử dụng tay lái như tôi làm.

Answer 2

Để sử dụng một phần từ mẫu, chỉ cần bao gồm {{> partialName}}.

<script id="base-template" type="text/x-handlebars-template"> 
    <div> 
    {{> person}} <!-- This is the partial template name --> 
    </div> 
</script> 

<script id="partial-template" type="text/x-handlebars-template"> 
    <div class="person"> 
    <h2>{{first_name}} {{last_name}}</h2> 
    <div class="phone">{{phone}}</div> 
    </div> 
</script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    var template = Handlebars.compile($("#base-template").html()); 

    //Aliasing the template to "person" 
    Handlebars.registerPartial("person", $("#partial-template").html()); 

    template(yourData); 
    } 
</script> 

Answer 3

Nó dễ dàng hơn để làm điều đó theo cách khác xung quanh - để biên dịch tất cả các mẫu của bạn như các mẫu bình thường, sau đó làm cho họ có sẵn như là partials:

Handlebars.partials = Handlebars.templates 

Điều này làm cho nó có thể sử dụng các mẫu của bạn như thường lệ, và như partials cũng như:

{{> normalTemplate}} 

Answer 4

Để thể hiện một phần từ javascript bạn có thể sử dụng

Handlebars.partials["myPartial"]()