Использование Mithril для генерации HTML-кода для бутстрапового аккордеона

Question

Имейте проблему с использованием Mithril для создания функционирующего аккордеона Bootstrap. Когда я пишу этот HTML вручную, аккордеон работает нормально.

<div id="mycontent"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-md-8 p-t-3"> 
 
       <div id="bookingaccordion" role="tablist"> 
 
        <div class="panel panel-default"> 
 
         <div id="headingOne" class="panel-heading" 
 
          role="tab"> 
 
          <h4 class="panel-title"> 
 
           <a data-target="#collapseOne" data-toggle="collapse" 
 
            data-parent="#bookingaccordion"> 
 
            Address and Contact details 
 
           </a> 
 
          </h4> 
 
         </div> 
 
         <div id="collapseOne" class="panel-collapse collapse in" 
 
          role="tabpanel" aria-labelledby="headingOne"> 
 
          Collapsible contact detail form 
 
         </div> 
 
        </div> 
 
        <div class="panel panel-default"> 
 
         <div id="headingTwo" class="panel-heading" role="tab"> 
 
          <h4 class="panel-title"> 
 
           <a data-target="#collapseTwo" data-toggle="collapse" 
 
            data-parent="#bookingaccordion"> 
 
            Booking details 
 
           </a> 
 
          </h4> 
 
         </div> 
 
         <div id="collapseTwo" class="panel-collapse collapse" 
 
          role="tabpanel" aria-labelledby="headingTwo"> 
 
          Collapsible booking detail form 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

я могу генерировать то, что, кажется, точно так же HTML с помощью этого кода в представлении Mithril.

return m("div.container", [ 
 
      m("div.row", [ 
 
       m("div.col-md-8.p-t-3", [ 
 
        m("#bookingaccordion", {role: "tablist"}, [ 
 
         m(".panel.panel-default", [ 
 
          m("#headingOne.panel-heading", {role: "tab"}, [ 
 
           m("h4.panel-title", [ 
 
            m('a[data-target="#collapseOne" 
 
             data-toggle="collapse" 
 
             data-parent="#bookingaccordion"]', 
 
             "Address and Contact details" 
 
            ) 
 
           ]) 
 
          ]), 
 
          m('#collapseOne.panel-collapse.collapse.in 
 
           [role="tabpanel" aria-labelledby="headingOne"]', 
 
           "Collapsible contact detail form" 
 
          ) 
 
\t \t \t \t \t \t ]), 
 
         m(".panel.panel-default", [ 
 
          m("#headingTwo.panel-heading", {role: "tab"}, [ 
 
           m("h4.panel-title", [ 
 
            m('a[data-target="#collapseTwo" 
 
             data-toggle="collapse" 
 
             data-parent="#bookingaccordion"]', 
 
             "Booking details" 
 
            ) 
 
           ]) 
 
          ]), 
 
          m('#collapseTwo.panel-collapse.collapse 
 
           [role="tabpanel" aria-labelledby="headingTwo"]', 
 
           "Collapsible booking detail form" 
 
          ) 
 
         ]) 
 
        ]) 
 
       ]) 
 
      ]) 
 
     ]);

Сгенерированный HTML отображает начальное состояние аккордеона прекрасно, но нет никакого ответа (открытие или закрытие) при нажатии на название якоря. Я подозреваю, что я неправильно создаю элементы данных, но я в тупике.

Answer 1

Да, вопрос о data-* атрибутов, вы должны передать их в качестве атрибутов функции m, как это:

m(
    'a', 
    { 
    'data-target': "#collapseOne", 
    'data-toggle': "collapse", 
    'data-parent': "#bookingaccordion" 
    }, 
    "Address and Contact details" 
) 

Вы должны сделать то же самое с атрибутами aria-* и role.