HTML5將常用屬性組合成超級屬性？

Question

我有很多按鈕，看起來像：

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#qq" data-req="foo">Foo</button> 
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#qq" data-req="bar">Bar</button> 
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#qq" data-req="baz">Baz</button> 

我想避免這麼多的重複;有沒有什麼辦法來定義某種單一的屬性，將擴展到其他幾個屬性？例如，它可能最終看起來像

super x = 'type="button" class="btn btn-info" data-toggle="modal" data-target="#qq"'; 

<button super="x" data-req="foo">Foo</button> 
<button super="x" data-req="bar">Bar</button> 
<button super="x" data-req="baz">Baz</button> 

NB。當然，這可以通過服務器端腳本來完成，但我希望避免這種情況。我使用的是Bootstrap 3.3.4，這些按鈕觸發Bootstrap模式。

Answer 1

這工作：

<button type="button" class="x" data-req="foo">Foo</button> 
<button type="button" class="x" data-req="bar">Baz</button> 
<button type="button" class="x" data-req="baz">Baz</button> 

，並在JavaScript部分

$("button.x").addClass("btn btn-info"); 
$("button.x").attr("data-toggle", "modal"); 
$("button.x").attr("data-target", "#qq"); 

這消除大部分重複的但我仍然不知道是否有一個更優雅的和/或運行時有效的方法。

Answer 2

聽起來像你可能正在尋找客戶端視圖框架，如Handlebars或React.js。您可以在哪裏發送（並緩存）客戶端上的模板，然後綁定到從服務器檢索的JSON。

您可以使用完整的堆棧框架，如Ember.js或Angular，但這可能比您需要的要多。