请教：javascript模板的原理？

Xxingren23发布于13 年前最后回复13 年前|7 回复7052 浏览0 收藏

哪位大神帮解释一下javascript的原理？谢了

另外 <%= done ? 'done' : '' %> 这种语法怎么理解？

  <script id="item-template" type="text/template">
  <div class="todo <%= done ? 'done' : '' %>">
  <div class="display"><input class="check" type="checkbox" <%= done ? 'checked="checked"' : '' %>/>
  <div class="todo-text"></div><span id="todo-destroy"></span></div><div class="edit"><input type="text" value="" class="todo-input"/></div></div>
  </script>
  <script id="stats-template" type="text/template">
  <% if (total) { %>
  <span class="todo-count"><span class="number"><%= remaining %> </span><span class="word"><%= remaining == 1 ? 'item' : 'items' %></span> left.
  </span><% } %>
  <% if (done) { %>
  <span class="todo-clear"><a href="#"> Clear
  <span class="number-done"><%= done %></span> completed
  <span class="word-done"><%= done == 1 ? 'item' : 'items' %></span></a></span><% } %>
  </script>

查看回复

zengwenbing#1·13 年前

<%=%>这个是ejs的输出绑定的值的

done? done : "" 是一个三元运算符号，表示当done不为0 false '' undefined null的时候为 done相反则为"" 也可以用 done || ""代替

xingren23#2·13 年前

引用 zengwenbing<%=% 这个是ejs的输出绑定的值的 done? done : "" 是一个三元运算符号，表示当done不为0 false '' undefined null的时候为 done相反则为"" ...

没有看到哪里引用ejs相关的js，这个语法怎么会被识别呢？跟引用了modernizer有关系么？

brighthas#3·13 年前

Look ejs source.

签名: 交流群244728015 《Node.js 服务器框架开发实战》 http://url.cn/Pn07N3

xingren23#4·13 年前

引用 brighthasLook ejs source. 签名: 交流群244728015 《Node.js 服务器框架开发实战》 http://url.cn/Pn07N3

感谢两位回复。原来backbone中引入了underscore，而underscore则实现了template功能，而我的上下文没有提到这一点。

http://learningcn.com/underscore/#template

template_.template(templateString, [data], [settings]) 将Javascript模板编译为可以用于描绘页面的函数。在从JSON数据源中描绘出一些复杂的HTML时十分有用。模板函数中既可以使用“<%= … %>”插入变量，也可以使用“<% … %>”来执行任意的Javascript代码。如果你想插入一个经过HTML转义处理的值，可以使用“<%- … %>”。当你使用模板函数时，传入一个data对象，这个data对象应当拥有对应于模板中的各个自由变量的属性成员。如果你只是想写一个一次性的代码段，你可以将data对象作为template的第二个参数传入以便立即进行描绘，而非返回一个模板函数。setting参数应当是一个哈希表，包含任何应当被覆盖的_.templateSetting的值。

var compiled = _.template("hello: <%= name %>"); compiled({name: 'moe'}); => "hello: moe"

var list = "<% _.each(people, function(name) { %> <%= name %> <% }); %>"; _.template(list, {people: ['moe', 'curly', 'larry']}); => "moecurlylarry"

var template = _.template("<%- value %>"); template({value: ''}); => "<script>"

brighthas#5·13 年前

see https://github.com/brighthas/stuwebfk/blob/master/lib/view.js

EJS simple implement.

签名: 交流群244728015 《Node.js 服务器框架开发实战》 http://url.cn/Pn07N3

xingren23#6·13 年前

引用 brighthassee https://github.com/brighthas/stuwebfk/blob/master/lib/view.js EJS simple implement. 签名: 交流群2...

感谢，一目了然~

nobuta#7·13 年前

简单的模板使用正则表达式直接替换自定义区块里面的代码, 复杂点的模板涉及到的东西就多了... 我也在造模板的轮子....所以对模板研究的多一点...

参与回复

登录后即可参与回复。登录

请教：javascript模板的原理？

回复 (7)