ejs学习笔记（二）

视图工具

EJS封装了一些视图工具插件，提供创建常用视图（如link，form）的快捷方式，让你的代码更简明扼要、更易懂。

tag(tag, html_options, end)

创建一个标签，tag为标签名，html_options为标签的属性值，end参数可选，设置标签的结束符，缺省为’>’。

1
<%= tag('div', {id: 'divElm', class='row'})%>
//生成以下html
<div id="divElm" class="row"></div>

不过上面的代码在IE会报错，在EJS源码里是这么说的special case because “class” is a reserved word in IE，所以如果要设置class属性，则<%= tag('div', {id: 'divElm', Class='row'})%>

start_tag_for(tag, html_options)

创建一个标签的开始

1
<%= start_tag_for('div', {id: 'divElm', class='row'})%>
//相当于
<%= tag('div', {id: 'divElm', class='row'})%>

tag_end(tag)

创建标签的结束

1
<%= tag_end('div')%>
//生成以下html
</div>

single_tag_for(tag, html_options)

创建一个自封闭标签，如img，input。但的HTML5的规范里，标签可以不闭合，关于闭不闭合，伯乐在线有篇文章写得挺清楚的：http://blog.jobbole.com/61514/。

1
<%= single_tag_for('img', {id: 'imgElm', src='image.jpg'})%>
//相当于
<%= tag('img', {id: 'imgElm', src='image.jpg'}, '/>')%>

select_tag(name, value, choices, html_options)

创建一个select下拉框，name为下拉框的id、name，value为选中值，choices为下拉框中option数据，第四个为可选参数，类型为对象，可设置select的id值。

1
<%
  var choices = [ 
    {value: 1, text: 'First Choice' }, 
    {value: 2, text: 'Second Choice'},
    {value: 3, text: 'Third Choice'}
  ];
%>
<div><%= select_tag('selectElm_name', 2, choices, {id: selectElm})%></div>
//生成以下html
<select id="selectElm" value="2" name="selectElm_name">
    <option value="1">First Choice</option>
    <option value="2" selected="selected">Second Choice</option>
    <option value="3">Third Choice</option>
</select>

date_tag(name, value, html_options)

创建三个下拉框的日期选择器，第一个参数为下拉框的id、name属性值加上[year,month,day]，第一个为指定日期（生成上下15年的日期选择器），实际是使用了3个select_tag。

1
<%= date_tag('date', new Date())%>
//将生成以下html
<select id="date[year]" value="2014" name="date[year]"><option>...</select>
<select id="date[month]" value="2014" name="date[month]"><option>...</select>
<select id="date[day]" value="2014" name="date[date]"><option>...</select>

创建链接a标签，name为标签text内容，设置confirm属性可为标签添加onclick事件，点击弹出confirm对话框。

1
<%= link_to('example', 'www.example.com') %>
<%= link_to('example', 'www.example.com', {confirm: 'hello'}) %>
//将生成以下html
<a href="www.example.com">example</a>
<a confirm="" onclick=" var ret_confirm = confirm(&quot;hello&quot;); if(!ret_confirm){ return false;} " href="www.example.com">example</a>

如果condition为false用法跟link_to一样；否则返回name，如果block是函数，则返回此函数的返回值。

1
<%= link_to_unless(false, 'example', 'www.example.com')%>
//相当于
<%= link_to('example', 'www.example.com') %>

如果condition为true用法跟link_to一样；否则返回name，如果block是函数，则返回此函数的返回值。

如果url不是当前页面用法跟link_to一样；否则返回name，如果block是函数，则返回此函数的返回值。

is_current_page(url)

判断url是不是当前页，是返回ture。

img_tag(image_location, alt, options)

创建img标签

text_area_tag 或 text_tag(name, value, html_options)

创建textarea标签

1
<%= text_tag('area', '这是个textarea输入框') %>
<%= text_tag('area', '这是个textarea输入框', {size: '50x4'}) %>
<%= text_tag('area', '这是个textarea输入框', {cols: 50, rows:4}) %>
//以上都生成以下html
<textarea id="area1" name="area1" cols="50" rows="4">这是个textarea输入框</textarea>

input_field_tag(name, value, inputType, html_options)

创建input标签。

1
<%= input_field_tag('input1', '', 'button') %>
<%= input_field_tag('input2', '', 'text') %>

hidden_field_tag(name, value, html_options)

创建一个type="hidden"的input标签，相当于<%= input_field_tag('input2', '', 'hidden') %>。

text_field_tag(name, value, html_options)

创建一个type="text"的input标签，相当于<%= input_field_tag('input2', '', 'text') %>。

submit_tag(name html_options)

创建一个type="submit"的input标签。

password_field(name, value, html_options)

创建一个type="password"的input标签。

form_tag(action, html_options)

创建form开始标签，表单属性，在html_option中设置。

form_tag_end

创建form结束标签

扩展视图工具

EJS虽然只封装一些常用的视图工具，但扩展它却很简单，只需为EJS.Helpers对象添加原型方法，方法函数返回html字符串即可。

1
//添加table视图工具
EJS.Helpers.prototype.table_tag = function(name, headers, rows, html_options) {
  html_options = html_options || {};
  html_options.name = name;
  var th = this.start_tag_for('thead'),
    tr = this.start_tag_for('tbody');
  for(var h in headers) {
    th += this.start_tag_for('th') + headers[h] + this.tag_end('th');
  }
  th += this.tag_end('thead');
  for(var r in rows) {
    tr += this.start_tag_for('tr');
    for(var c in rows[r]) {
      tr += this.start_tag_for('td') + rows[r][c] + this.tag_end('td');
    }
    tr += this.tag_end('tr');
  }
  tr += this.tag_end('tbody');
  return this.start_tag_for('table', html_options) + th + tr + this.tag_end('table');
}