HAML - 如何创建这一行HTML

的这是一种复杂的HTML线在HAML创造的：HAML - 如何创建这一行HTML

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

我不知道该怎么做。任何想法？我只能这样做：

%a.btn 
    %span.icon-bar Hello

但不知道如何做复杂的东西。

谢谢！

来源

2012-04-25 GeekedOut

%a.btn.btn-navbar{"data-target" => ".nav-collapse", "data-toggle" => "collapse"}

要不然

%a.btn.btn-navbar{:data => {:toggle => 'collapse', :target => '.nav-collapse'}}

来源

2012-04-30 18:56:17 Chandrakant

，因为在这一行中没有ruby，所以在这里使用散列火箭语法无助于可读性。 '％a.btn.btn-navbar（data-target =“。nav-collapse”data-toggle =“collapse”）对没有计算属性值的节点更有帮助。 – ocodo 2012-08-03 01:10:37

谢谢，@Slomojo！不知道该语法，因为它不在HAML文档中。提供最佳的可读性。 – mwld 2013-02-26 11:41:36

这是在文档中，这里http://haml.info/docs/yardoc/file.REFERENCE.html#attributes，但是讨论次要ruby散列样式。（没有它自己的锚点）只要做一个页面查找“HTML风格的属性” – ocodo 2013-02-26 12:46:34

-1

%a{:class => "btn btn-navbar", :data-toggle => "collapge", :data-target => ".nav-collapse"} Hello

只需从阅读HAML网站...

http://haml-lang.com/tutorial.html

**我没有测试这一点，我刚才读它的网站上

来源

2012-04-25 18:33:05 Brendan

不这样做没做到。我明白了这一点：％a.btn.btn-navbar {：data => {：target =>“.nav-collapse”，：toggle =>“collapse”}} – GeekedOut 2012-04-25 18:53:38

多个类可以只是chained together ：

%a.btn.btn-navbar

给出：

<a class='btn btn-navbar'></a>

Custom data attributes可以用单个:data散列来指定：

%a.btn.btn-navbar{:data => {:toggle => 'collapse', :target => '.nav-collapse'}}

给出：

<a class='btn btn-navbar' data-target='.nav-collapse' data-toggle='collapse'></a>

来源

2012-04-25 19:08:23 matt

+1避免为每个数据属性键入'data-'！ – antinome 2013-01-28 21:19:15

/ 80 characters (Chandrakant's anser): 
%a.btn.btn-navbar{"data-target" => ".nav-collapse", "data-toggle" => "collapse"} 

/79 characters (Matt's answer): 
%a.btn.btn-navbar{:data => {:toggle => 'collapse', :target => '.nav-collapse'}} 

/69 characters (My fave method): 
%a.btn.btn-navbar(data-toggle="collapse" data-target=".nav-collapse") 

/68 characters (Ruby >= 1.9): 
%a.btn.btn-navbar{data: {toggle:"collapse", target:".nav-collapse"}}

来源

2012-05-31 05:56:54 Gerry

字符数不是衡量所有事物的指标。 – ocodo 2012-08-03 01:12:44

我知道，这就是为什么“我的fave方法”不是最低字符选项。然而，读取整个代码库的代码较少，通常会使其阅读速度更快，打字速度更快，而且在您的职业生涯中更少的RSI诱导（尽管我没有测量按键）。我相信有人会发现这些信息很有用。特别是那些不知道可用的替代语法。 – Gerry 2012-08-04 06:54:42

HAML - 如何创建这一行HTML

回答

相关问题