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

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, но это, вероятно, больше, чем вам нужно.