4p_template 中文文档教程

Question

4p_jstemplate

Important if you use NodeJs, jsdom 3.1.2 is required

npm install -S 'jquery@>=2.1'
npm install -S 'jsdom@3.1.2'

（注意jsdom 版本 3.1.2 是必需的，因为从 jsdom 版本 4.0.0 开始，jsdom 不再有效 使用 Node.js。 如果你使用 Io.js 而不是 Node.js，你可以使用最新的 4.x 版本的 jsdom。） https://github.com/UncoolAJ86/node-jquery https://www.npmjs.com/package/jsdom

    /* GET home page. */
    router.get('/', function(req, res) {
        var file = 'views/index.html'; // our template file template
        fs.readFile(file, function (err, content) {
            if (err) throw err;

            // init template
            var tpl = $4p_template.template(content.toString()); 

            // some data
            var template_data = { 
                bar: 'hello world',
                deep: {'foo': {'bar': 'this data is in deep.foo.bar'}},
                list: ['hop', 'hip', 'hap', 'yip', 'yep']
            };     

            t = tpl.element.html(tpl.render(template_data)); // render to dom

            // tpl.element is a jquery instance of our template element
            tpl.element.find('li').css('color', 'red'); // play with it !

            // handle more complex structure and play with dom
            tpl.renderAfter('table', ''); // render <table>
            for (i = 1; i <= 11; i++) {
                tpl.renderAfter('table-line', {cell: [i, i * i]});  // push rendered data in table                
            }

            var rendered = t.html(); // get html
            res.send(t.html()); // send output     
        });
    };

测试一下： http://jsfiddle.net/mkdgs/FvBnX/

我制作了这个模板引擎，其想法类似于 handlebar，但所有表示模板逻辑都在 javascript 中 （我们不需要再学习一门新的模板语言）并且很容易将 html 和 javascript 混合使用，就像 php 和 html 一样。

您可以重复使用您的模板并定义它的重复子部分。

在模板中，所有数据都映射到 $4p.templateData 对象，并具有三个方法 is()、iterate()、v()

$4p.templateData 对象 可以包含值混合值标量、数组或对象

is('with','data','path') 用于遍历数据树，这个返回一个$4p.templateData。 那就是返回对应于数据路径的数据对象。 如果数据路径不存在，他返回一个空值 $4p.templateData， 因此，如果没有价值，您的代码就不会中断，您不必担心他的数据是否已定义。

迭代（） 则用于通过 $4p.templateData 对象进行循环

如果它包含对象或数组值v() 返回包含在该对象中的模板中传递的数据值

给我反馈；）

模板部分与许多其他部分一样，灵感来自我们的大师： http://ejohn.org/blog/javascript-micro-templating/