Mithrilを使用してブートストラップアコーディオンのHTMLを生成する

Question

Mithrilを使用して機能するブートストラップアコーディオンを生成する際に問題があります。 この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のようです何を生成することができます。

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属性と同じことをしなければなりません。