使用Mithril爲Bootstrap Accordion生成HTML

使用Mithril生成Bootstrap手風琴有問題。手動編寫HTML時，手風琴可以正常工作。使用Mithril爲Bootstrap Accordion生成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顯示手風琴初始狀態完美，但沒有響應（打開或關閉）單擊標題錨時。我懷疑我錯誤地生成了數據元素，但我很難過。

來源

2016-07-25 PeterW

是的，問題是在data-*屬性，你必須通過他們的屬性中m功能，像這樣：

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

你必須做同樣與aria-*和role屬性。

來源

2016-07-26 09:23:40 Vier

偉大的這個答案的作品！我注意到你使用單引號的屬性名稱和雙引號的值。這很重要，如果是這樣，爲什麼？不能upvote - 沒有聲望。 – PeterW

@PeterW在使用單引號或雙引號時沒有區別，某些樣式指南（如[airbnb]（https://github.com/airbnb/javascript#strings）中的一個）推薦使用單引號。我只是在值上使用雙引號，因爲我在複製粘貼後編輯代碼。即使您無法註冊，請考慮通過點擊複選標記來接受此答案。這向更廣泛的社區表明，您已經找到了解決方案，併爲答覆者和您自己提供了一些聲譽。沒有義務這樣做。 – Vier

使用Mithril爲Bootstrap Accordion生成HTML

回答

相關問題