请教:javascript模板的原理?
发布于 1年前 作者 xingren23 1115 次浏览

哪位大神帮解释一下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>
7 回复

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

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

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

<script src="js/libs/modernizr-2.0.6.min.js" type="text/javascript">

Look 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’]}); => "
  • moe
  • curly
  • larry
  • "

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

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

    EJS simple implement.


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

    感谢,一目了然~

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

    回到顶部