首页 > 代码库 > JsRender系列demo(3)-自定义容器

JsRender系列demo(3)-自定义容器

2024-07-14 07:10:49   222人阅读

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script type="text/javascript" src="http://www.mamicode.com/scripts/jquery.js"></script><script type="text/javascript" src="http://www.mamicode.com/scripts/jquery-ui.js"></script><script type="text/javascript" src="http://www.mamicode.com/scripts/jsrender.js"></script><link href="http://www.mamicode.com/scripts/demos.css" rel="stylesheet" /><link href="http://www.mamicode.com/scripts/movielist.css" rel="stylesheet" /><style type="text/css">.role{font-weight: bold;font-style: italic;background-color: Yellow;}.synopsis{background-color: white;padding: 15px;}.director{font-weight: bold;font-style: italic;color: red;}</style></head><body><!--下面的内容只是说明作用--><h3>用{{: }} or {{> }}用可选和编码展示数据</h3><ul><li><em>{{:value}}</em> —用于渲染值，包括HTML标记。</li><li><em>{{loc:value lang="..."}}</em> —使用自定义转换器。</li><li><em>{{html:value}}</em> —将使用内置的HTML编码器。（更好的安全性，在元素的内容，但轻微的性能成本）。</li><li><em>{{>value}}</em> — 内置的HTML编码器替代语法.</li><li><em>{{attr:availability}}</em> —使用内置的属性转换编码器。（更好的安全属性）。</li><li><em>{{url:value lang="..."}}</em> — 使用内置的URL编码转换。</li></ul><br /><div class="box label"><b>Note:</b> A common use for converters is to protect against injection attacks from untrusted data.<br />It is generally best to use <b>{{> }}</b> when rendering data within element content, if the data is not intended to provide markup for insertion in the DOM.<br />In the context of HTML attributes, use <b>{{attr: }}</b>.</div><!--上面的内容只是说明作用--><!--对比了{{:name}}和{{>name}}的区别--><script type="text/x-jsrender" id="movieTemplate"><tr title="{{attr:availability}}"><td>{{loc:title lang=‘EN‘}}</td><td>{{loc:title lang=‘FR‘}}</td><td class="synopsis">{{:synopsis}}</td><td class="synopsis">{{>synopsis}}</td></tr></script><!--表格开始--><table><thead><tr><th>Title (loc:English)</th><th>Title (loc:French)</th><th>No Convert</th><th>HTML Encode</th></tr></thead><tbody id="movieList"></tbody></table><!--表格结束--><script type="text/javascript">//Json数据var movies = [{availability: "Available in ‘X&Y‘ Cinemas",title: "Meet Joe Black",synopsis: "The <span class=‘role‘>死神</span> (<a href=http://www.mamicode.com/‘http://www.netflix.com/RoleDisplay/Brad_Pitt/73919‘>Brad Pitt) visits Bill Parrish (Anthony Hopkins)..."},{availability: "Available at < 20kms from London",title: "Eyes Wide Shut",synopsis: "Director <span class=‘director‘>Stanley Kubrick‘s</span> final film: <br/><br/><img src=http://www.mamicode.com/‘http://cdn-4.nflximg.com/US/boxshots/large/5670434.jpg‘/>"}];//自定义模板$.views.converters({loc: function (value) {var result = "";switch (this.tagCtx.props.lang) {case "EN": result = value; break;case "FR": switch (value) {case "Meet Joe Black":result = "Rencontrez Joe Black";break;case "Eyes Wide Shut":result = "Les Yeux Grand Fermes";break;}break;}return result;}});$("#movieList").html($("#movieTemplate").render(movies));</script></body></html>

　　


联系
我们