Как инициализировать виджет jQuery в шаблоне Handlebars?

Question

У меня есть test.hbs файл с гармошкой JQuery:

<div id="accordion"> 
    <h3>Section 1</h3> 
    <div> 
    <p> 
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer 
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit 
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut 
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. 
    </p> 
    </div> 
    <h3>Section 2</h3> 
    <div> 
    <p> 
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet 
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor 
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In 
    suscipit faucibus urna. 
    </p> 
    </div> 
</div> 

Как я могу инициализировать этот аккордеон внутри test.hbs файл?

$(function() { 
    $("#accordion").accordion(); 
    }); 

спасибо.

Answer 1

Поскольку рули создают строки вместо элементов DOM, это немного сложно. Существуют некоторые решения по расширению руля в DIM-системе для шаблонов (например, проект устаревших DOMBars).

Я создал помощник руля, который может получить элемент DOM, используя MutationObserver для обнаружения, когда добавляется соответствующий кусок html. (Browser support информация, см. webcomponents-lite для полипол).

0 Служебные программы в GitHub и demo.

Пример шаблона:

<p>Here is a plugin:</p> 
{{#jqinit 'accordion'}} 
<div> 
    <h3>Section 1</h3> 
    <div><p>Mauris mauris ante...</p></div> 
    <h3>Section 2</h3> 
    <div><p>Sed non urna...</p></div> 
</div> 
{{/jqinit}} 

Краткое описание для соответствующего кода:

watch.js определяет функцию forHtml(html, callback) которая вызывает функцию обратного вызова, когда данный HTML встречается в DOM. Он изменяет html, чтобы временно иметь класс, который делает его уникальным.

jQueryHelpers.js определяет помощника jqinit, который использует функцию watch.forHtml для наблюдения за блоком, определенным помощником, а затем вызывает функцию на элементе DOM. Помощник принимает имя функции как первый параметр и, возможно, объект JSON, который получает синтаксический анализ и передается в качестве аргумента функции.