html - 使用 Mithril 为 Bootstrap Accordion 生成 HTML

Question

在使用 Mithril 生成功能正常的 Bootstrap Accordion 时遇到问题。 当我手动编写此 HTML 时， Accordion 可以正常工作。

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

我可以在 Mithril View 中使用这段代码生成看起来完全相同的 HTML。

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 完美显示 Accordion 初始状态，但点击标题 anchor 时没有响应(打开或关闭)。 我怀疑我生成的数据元素不正确，但我很困惑。

Answer 1

是的，问题出在 data-* 属性上，您必须将它们作为属性传递给 m 函数，如下所示:

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

您必须对 aria-* 和 role 属性执行相同的操作。