视图

模版引擎

ThinkJS 里默认使用的模版引擎是 ejs，关于 ejs 的使用文档你可以看 这里。

ThinkJS 除了支持 ejs 模版，还支持如下的模版：

模版引擎相关的配置如下：

  1. // 模版引擎相关的配置
  2. tpl_content_type: "text/html", // 模版输出时发送的 Content-Type 头信息
  3. tpl_file_suffix: ".html", // 模版文件名后缀
  4. tpl_file_depr: "_", //controller 和 action 之间的分隔符
  5. tpl_engine_type: "ejs", // 模版引擎名称
  6. tpl_engine_config: {}, // 这里定义模版引擎需要的一些额外配置，如：修改左右定界符

如果使用其他的模版引擎，那么需要扩展 Template 对应的 Driver，具体方式请见 ThinkJS 里的 Template Driver 写法。

模版文件

默认的模版文件路径使用的规则为：

视图目录 / 分组名 / 控制器名 + 控制器与操作之间的分隔符 (默认为 _)+ 操作名 + 模版文件后缀 (默认为 .html)

如：访问 /group/detail?id=10，识别到的分组名为 home，控制器名为 group，操作名为 detail，那么对应的模版文件为：App/View/Home/group_detail.html

变量赋值

如果要在模版中使用变量，必须在控制器中把变量传递到模版，系统提供了 assign 方法对模版变量进行赋值。

  1. // 单个变量赋值
  2. this.assign("name", "welefen");
  3. //assign 除了可以变量赋值，可以进行读取之前赋值过的变量值
  4. var name = this.assign("name");
  5. // 多个变量通过一个对象一起赋值
  6. this.assign({
  7.     name: "welefen",
  8.     email: "welefen@gmail.com",
  9.     extra: {score: 100}
  10. })

注： ejs 模版中使用到的变量必须要在控制器里进行赋值，否则会报错。

除了手工进行赋值外，系统默认将所有配置和 http 对象也赋值到了模版中。模版中可以通过下面的方式获取配置值和 http 对象值：

  1. config.server_domain // 获取配置中 server_domain 的值
  2. http.get.name // 从 http 对象中获取 get 参数 name 的值

模版渲染

模版定义后就可以渲染模版输出，系统也支持直接渲染内容输出，模版赋值必须在模版渲染之前进行。

模版渲染使用 display 方法，如：

  1. this.display(); // 自动识别模版路径
  2. this.display("home:group:list"); // 渲染 Home/group_list.html 模版文件
  3. this.display("/home/welefen/xxx/a.html"); //

模版渲染是一个异步的过程，this.display 返回的是一个 promise，为了方便错误捕获，需要将这个 promise 返回。如：

  1. // 分组详细页代码示例
  2. detailAction: function(){var id = this.get("id");
  3.     var self = this;
  4.     // 需要将这个 promise 返回，系统会自动捕获异常
  5.     // 如果进行不 return，那么需要额外添加 catch 来获取异常
  6.     return D('Group').where({id: id}).find().then(function(data){
  7.         self.assign("data", data);
  8.         // 将模版渲染返回
  9.         return self.display();})
  10. }

获取内容

系统提供了 fetch 方法来获取渲染后的模版内容，如：

  1. // 获取模版内容
  2. this.fetch().then(function(content){
  3.     //content 为渲染后的模版内容
  4.     // 对 content 进行额外的过滤和替换操作，然后可以通过 this.end(content) 进行输出
  5. })

ejs 的基本使用方法

ejs 通过 <% 和 %> 来构造基本的语法。

使用 <%= %> 与 <%- %> 来显示模板变量数据。 = 表示进行 html 转义，- 表示不转义。

使用 <%if(condition){%> code <%}%> 来进行条件判断

使用 <%data.forEach(function(item){%> <%=item%> <%})%> 来进行数据遍历