openerp所用QWEB2的调试笔记

【1】 调式qweb模板时， 可以脱离openerp环境

阅读一下openerp目录 qweb目录中的几个html文件，可以作为起步

在浏览器下， 可以这样运行这些文件

http://127.0.0.1:8069/web/static/lib/qweb/qweb-benchmark.html

http://127.0.0.1:8069/web/static/lib/qweb/qweb-test.js.html

【2】qweb模板的格式如果不符合xml规范， 浏览器显示空白， 浏览器的控制台中会显示如下提示

Uncaught Error: QWeb2: This page contains the following errors:error on line xxx at column yyy:

然后是具体的错误原因。比如

Opening and ending tag mismatch: aaa  line nnn and bbb

Specification mandate value for attribute ccc

【3】在模板中增加如下指令， 可在浏览器的控制台上输出变量内容

〈t t-log="变量名称" />

当使用多个t-log时， 控制台中输出的变量内容会引起混淆， 这时可再增加如下语句

〈t t-log=" '变量名称的说明' " /> 

【4】在模板中增加如下指令， 可在qweb的编译模板过程中进入断点语句，

〈t t-debug="随便什么东东" /> 

这时， 我们可以在控制台的源码页签中看到编译的中间过程，

在控制台下， 使用console.log（dict) 可以看到传入的所有参数

使用console.log(r) 可以看到输出中间结果

官方文档上 介绍的使用方法 〈t t-debug />  ，如果后面不随便添加些什么东东， 会出现如下错误

Specification mandate value for attribute t-debug

【5】模板文件示例  （在qweb目录下， 文件名为 laoliu.xml)

如下是官网上web文档中的例子， 增加了t-log和t-debug语句

〈templates>
       〈div t-name="example_template" t-attf-class="base #{cls}">
         〈t t-log="'in example_template, value of [items]:'" />
         〈t t-log="items" />
         〈h4 t-if="title">   〈t t-esc="title"/>   〈/h4>
         〈ul>
           〈li t-foreach="items" t-as="item" t-att-class="item_parity">
             〈t t-call="example_template.sub">
               〈t t-set="arg" t-value="item_value"/>
             〈/t>
           〈/li>
         〈/ul>
         〈t t-debug="随便什么东东" />
       〈/div>  

       〈t t-name="example_template.sub">
         〈t t-log="'in example_template.sub, value of [arg]:'" />
         〈t t-log="arg" />
         〈t t-esc="arg.name"/>
         〈dl>
           〈t t-foreach="arg.tags" t-as="tag" t-if="tag_index lt 5">
             〈dt>   〈t t-esc="tag"/>   〈/dt>
             〈dd>   〈t t-esc="tag_value"/>   〈/dd>
           〈/t>
         〈/dl>
       〈/t>
 〈/templates>

【6】 程序示例  （在qweb目录下， 文件名为 laoliu.html)

访问方法：http://127.0.0.1:8069/web/static/lib/qweb/laoliu.html

〈!doctype html>
 〈html>
 〈head>
     〈script src="../jquery/jquery-1.8.3.js">   〈/script>
     〈script type="text/javascript" src="qweb2.js">   〈/script>
     〈script>
        var laoliu_data={
            "class1": "foo",
            "title": "Random Title",
            "items": [
                { "name": "foo", "tags": {"bar": "baz", "qux": "quux"} },
                { "name": "Lorem", "tags": {
                    "ipsum": "dolor",
                    "sit": "amet",
                    "consectetur": "adipiscing",
                    "elit": "Sed",
                    "hendrerit": "ullamcorper",
                    "ante": "id",
                    "vestibulum": "Lorem",
                    "ipsum": "dolor",
                    "sit": "amet"
                    }
                }
            ]
        };

        QWeb = new QWeb2.Engine();
        QWeb.debug = true;
        QWeb.add_template('laoliu.xml');
        template='laoliu.xml';
        result=QWeb.render('example_template', laoliu_data );
        $(document).ready(function () {
            $('.placeholder').append(result);
        });
     〈/script>  

 〈/head>
 〈body>
 〈div class="placeholder">
 〈/div>
 〈/body>
 〈/html>

【7】t-debug的运行结果

(function(dict
) {

   var context = { engine : this, template : 'example_template' };
   dict = dict || {};
   dict['__template__'] = 'example_template';
   var r = [];
    r.push(' 〈div');
r.push(context.engine.tools.gen_attribute(['class', ('base ' + (dict['cls']))]));
r.push('>  ',
'n        ');
console.log('in example_template, value of [items]:');
r.push('n        ');
console.log(dict['items']);
r.push('n        ');
if (dict['title']) {
r.push(' 〈h4>  ');
r.push(context.engine.tools.html_escape(dict['title']));
r.push(' 〈/h4>  ');
}
r.push('n         〈ul>  ',
'n          ');
context.engine.tools.foreach(context, dict['items'], 'item', dict, function(context, dict) {
r.push(' 〈li');
r.push(context.engine.tools.gen_attribute(['class', (dict['item_parity'])]));
r.push('>  ',
'n            ');
r.push(context.engine.tools.call(context, 'example_template.sub', dict, '', function(context, dict) {
var r = [];
r.push('n              ');
dict['arg'] = (dict['item_value']);
r.push('n            ');
return r.join('');
}));
r.push('n           〈/li>  ');
});
r.push('n         〈/ul>  ',
'n        ');
debugger;
r.push('n       〈/div>  ');

      return r.join('');
})