• vipertp
  • PHP
  • 4.2MB
  • zip
  • 0
  • 1 积分
  • 1
  • 2019-06-19 03:20
ContentBlocks is a powerful content manager for MODX allowing editors to create modular, multi-column content.
# JavaScript Templates ## Demo [JavaScript Templates Demo]( ## Description 1KB lightweight, fast & powerful JavaScript templating engine with zero dependencies. Compatible with server-side environments like Node.js, module loaders like RequireJS, Browserify or webpack and all web browsers. ## Usage ### Client-side Include the (minified) JavaScript Templates script in your HTML markup: ```html <script src="js/tmpl.min.js"></script> ``` Add a script section with type **"text/x-tmpl"**, a unique **id** property and your template definition as content: ```html <script type="text/x-tmpl" id="tmpl-demo"> <h3>{%=o.title%}</h3> <p>Released under the <a href="{%=o.license.url%}" rel='nofollow' onclick='return false;'>{}</a>.</p> <h4>Features</h4> <ul> {% for (var i=0; i<o.features.length; i++) { %} <li>{%=o.features[i]%}</li> {% } %} </ul> </script> ``` **"o"** (the lowercase letter) is a reference to the data parameter of the template function (see the API section on how to modify this identifier). In your application code, create a JavaScript object to use as data for the template: ```js var data = { "title": "JavaScript Templates", "license": { "name": "MIT license", "url": "" }, "features": [ "lightweight & fast", "powerful", "zero dependencies" ] }; ``` In a real application, this data could be the result of retrieving a [JSON]( resource. Render the result by calling the **tmpl()** method with the id of the template and the data object as arguments: ```js document.getElementById("result").innerHTML = tmpl("tmpl-demo", data); ``` ### Server-side The following is an example how to use the JavaScript Templates engine on the server-side with [node.js]( Create a new directory and add the **tmpl.js** file. Or alternatively, install the **blueimp-tmpl** package with [npm]( ```sh npm install blueimp-tmpl ``` Add a file **template.html** with the following content: ```html <!DOCTYPE HTML> <title>{%=o.title%}</title> <h3><a href="{%=o.url%}" rel='nofollow' onclick='return false;'>{%=o.title%}</a></h3> <h4>Features</h4> <ul> {% for (var i=0; i<o.features.length; i++) { %} <li>{%=o.features[i]%}</li> {% } %} </ul> ``` Add a file **server.js** with the following content: ```js require("http").createServer(function (req, res) { var fs = require("fs"), // The tmpl module exports the tmpl() function: tmpl = require("./tmpl"), // Use the following version if you installed the package with npm: // tmpl = require("blueimp-tmpl"), // Sample data: data = { "title": "JavaScript Templates", "url": "", "features": [ "lightweight & fast", "powerful", "zero dependencies" ] }; // Override the template loading method: tmpl.load = function (id) { var filename = id + ".html"; console.log("Loading " + filename); return fs.readFileSync(filename, "utf8"); }; res.writeHead(200, {"Content-Type": "text/x-tmpl"}); // Render the content: res.end(tmpl("template", data)); }).listen(8080, "localhost"); console.log("Server running at http://localhost:8080/"); ``` Run the application with the following command: ```sh node server.js ``` ## Requirements The JavaScript Templates script has zero dependencies. ## API ### tmpl() function The **tmpl()** function is added to the global **window** object and can be called as global function: ```js var result = tmpl("tmpl-demo", data); ``` The **tmpl()** function can be called with the id of a template, or with a template string: ```js var result = tmpl("<h3>{%=o.title%}</h3>", data); ``` If called without second argument, **tmpl()** returns a reusable template function: ```js var func = tmpl("<h3>{%=o.title%}</h3>"); document.getElementById("result").innerHTML = func(data); ``` ### Templates cache Templates loaded by id are cached in the map **tmpl.cache**: ```js var func = tmpl("tmpl-demo"), // Loads and parses the template cached = typeof tmpl.cache["tmpl-demo"] === "function", // true result = tmpl("tmpl-demo", data); // Uses cached template function tmpl.cache["tmpl-demo"] = null; result = tmpl("tmpl-demo", data); // Loads and parses the template again ``` ### Output encoding The method **tmpl.encode** is used to escape HTML special characters in the template output: ```js var output = tmpl.encode("<>&\"'\x00"); // Renders "&lt;&gt;&amp;&quot;&#39;" ``` **tmpl.encode** makes use of the regular expression **tmpl.encReg** and the encoding map **tmpl.encMap** to match and replace special characters, which can be modified to change the behavior of the output encoding. Strings matched by the regular expression, but not found in the encoding map are removed from the output. This allows for example to automatically trim input values (removing whitespace from the start and end of the string): ```js tmpl.encReg = /(^\s+)|(\s+$)|[<>&"'\x00]/g; var output = tmpl.encode(" Banana! "); // Renders "Banana" (without whitespace) ``` ### Local helper variables The local variables available inside the templates are the following: * **o**: The data object given as parameter to the template function (see the next section on how to modify the parameter name). * **tmpl**: A reference to the **tmpl** function object. * **_s**: The string for the rendered result content. * **_e**: A reference to the **tmpl.encode** method. * **print**: Helper function to add content to the rendered result string. * **include**: Helper function to include the return value of a different template in the result. To introduce additional local helper variables, the string **tmpl.helper** can be extended. The following adds a convenience function for *console.log* and a streaming function, that streams the template rendering result back to the callback argument (note the comma at the beginning of each variable declaration): ```js tmpl.helper += ",log=function(){console.log.apply(console, arguments)}" + ",st='',stream=function(cb){var l=st.length;st=_s;cb( _s.slice(l));}"; ``` Those new helper functions could be used to stream the template contents to the console output: ```html <script type="text/x-tmpl" id="tmpl-demo"> <h3>{%=o.title%}</h3> {% stream(log); %} <p>Released under the <a href="{%=o.license.url%}" rel='nofollow' onclick='return false;'>{}</a>.</p> {% stream(log); %} <h4>Features</h4> <ul> {% stream(log); %} {% for (var i=0; i<o.features.length; i++) { %} <li>{%=o.features[i]%}</li> {% stream(log); %} {% } %} </ul> {% stream(log); %} </script> ``` ### Template function argument The generated template functions accept one argument, which is the data object given to the **tmpl(id, data)** function. This argument is available inside the template definitions as parameter **o** (the lowercase letter). The argument name can be modified by overriding **tmpl.arg**: ```js tmpl.arg = "p"; // Renders "<h3>JavaScript Templates</h3>": var result = tmpl("<h3>{%=p.title%}</h3>", {title: "JavaScript Templates"}); ``` ### Template parsing The template contents are matched and replaced using the regular expression **tmpl.regexp** and the replacement function **tmpl.func**. The replacement function operates based on the [parenthesized submatch strings]( To use different tags for the template syntax, override **tmpl.regexp** with a modified regular expression, by exchanging all occurrences of "{%" and "%}", e.g. with "[%" and "%]": ```js tmpl.regexp = /([\s'\\])(?!(?:[^[]|\[(?!%))*%\])|(?:\[%(=|#)([\s\S]+?)%\])|(\[%)|(%\])/g; ``` By default, the plugin preserves whitespace (newlines, carriage returns, tabs and spaces). To strip unn
      MoreGallery is an intuitive and powerful image gallery for MODX with video support, tags, cropping and custom fields.
      Looking for a better editor? Meet Redactor. This commercial WYSIWYG editor brings you a lightweight & user friendly editing experience.
    • Commerce_PFCheckout:在MODX CMS上用于Commerce的PostFinance Checkout集成
      MODX上的Commerce的PostFinance Checkout集成 “ PostFinance Checkout是瑞士在线商店最实用的多合一付款解决方案-合同合作伙伴,插件和为客户提供的五种付款方式:PostFinance卡,PostFinance电子金融,TWINT,...
    • modx-server:MODX本地开发服务器
      MODX本地开发服务器 在Vagrant中编写的虚拟MODX开发环境, 与Ansible置备,搭载Gitify 所述工作流使用从modmore其是CLI应用内用于传输/迁移镆铘DB-数据。 当前,该服务器希望位于Gitify项目中,如下所示: 目录...
    • 关于VC的微软新闻组列表和源码下载地址
    • Fuzzy-Programming.rar
    • adpmov.rar
      目标跟踪定位 其中包括目标的位置速度及加速度的跟踪曲线
    • dongtoeng.rar
    • 一对一校友录
      这个校友录版面是一网名为“欣然”的女孩修改使用的1.0版校友录,感谢她的提供。在前阵子我在 论坛说需要美工帮忙,此后便受到了“青蛙”、goudan的大力支持,但由于我的一些原因,还是选择了在原 基础上修改,用新版面将花大量的时间,这对现在的我来说将是最大的困难,如果我还是在校学生那会无所谓。   感谢欣然、goudan、青蛙和一直关心本程序动态的朋友们,你们的支持是就是我们的动力。