模板基础"/>
#127:JavaScript模板基础
影片下载
(只有MVP支持者可以下载原始高质量的录音以供离线查看。)
模板是您需要注入到页面上HTML块。 通常,模板是在“服务器端”创建的-因为它们会完整地出现在JavaScript中,只需要放入DOM中即可。 但是有时这不可行或需要额外的往返服务器,这可能很慢。 在那种情况下,使用JavaScript正确的模板是理想的。 当然,您可以执行一些字符串连接,将HTML和数据的一部分加在一起,直到拥有所需的模板为止。 但这可能并不理想,因为它没有将数据和模板的关注点分开。 真正JavaScript模板可以为您提供帮助。
在此截屏视频中,我们将介绍JavaScript模板制作的基本“原因”,然后专门介绍一个如何在Underscore.js中完成的简单示例。 然后,我们将介绍其他一些选择。
演示版
var compiled = _.template("<div class='movie'>" + "<h2><%= movie_title %></h2>" + "<p><%= movie_desc %></p>" + "</div>"
);var i, toAppendString = "";for (i = 0; i < data.movies.length; i++) {toAppendString += compiled(data.movies[i]);
} $("body").append(toAppendString);
在CodePen上查看 Chris Coyier ( @chriscoyier )的Pen %= penName%>
链接
- CodePen基本演示
- Underscore.js模板化
- NetTuts: 使用JavaScript模板时的最佳做法
- MDN: JavaScript模板
- John Resig: JavaScript微型模板化
- 詹姆斯·帕多西(James Padolsey): 直截了当的插补
翻译自: /
更多推荐
#127:JavaScript模板基础
发布评论