Использование Mithril для генерации HTML для Bootstrap Accordion

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

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"
                           )
      ]),
                        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 атрибутов.