- 1.qweb是啥？
qweb只是个模板引擎， 解析完xml后，拼接js 函数得到 html片段描述， $(html)生成dom...
(20行代码实现JavaScript模板引擎: https://juejin.im/post/59663eaa6fb9a06ba73d4c35 类似的玩意儿，当然也有特别的地方，处理了_t国际化翻译。。。 )
qweb选渲染好后dom，jquery绑定事件，然后想干嘛干嘛
和vue不同之处，和以前的jsp有点像，又有点区分
可以 前端渲染
服务器渲染
先祭出官方文档
- 2.特殊字符
xxxxxxxxxx1
WORD_REPLACEMENT: {2
and: "&&",3
or: "||",4
gt: ">",5
gte: ">=",6
lt: "<",7
lte: "<="8
},已复制
xml，里面不能写 这些符号，只能用 and .... 或者转义字符 && < 。。。。
- 3.属性设置
接下来说一哈重点：
xxxxxxxxxx1
<div t-attf-class="#{kanban_color(record.color.raw_value)}">2
<button t-attf-class="btn btn-secondary js_website #{website.selected ? 'active' : ''}"3
t-att-data-website-id="website.id">4
t-attf-class="#{inNavbar ? '' : 'dropdown-item '}o_menu_entry_lvl_#{depth}"5
已复制
- t-att只能可以直接接变量或者常量 设置属性,
- t-attf 使用 #{表达式，函数, 变量)} 这样可以动态设置 属性，也可以 {{表达式，函数,变量 }}, 效果差不多
xxxxxxxxxx1
t-attf-class="text-left {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}"已复制
还可以 python语法表达式（真变态.... 更喜欢三元表达式 a?a:b，估计为了服务器渲染，使用py表达式）
属性设置，相当于vue里面的 :class=,:src= 类似的属性设置
4.t-call
参考官方文档
这儿的t-raw="0" 相当于vue的slot 插槽。。。
5.杂项
t-esc ，t-raw 相当于 vue里面的{{ 变量 }}
翻译成js，
foo =42
console.log(foo)
翻译成js
if(a_test){
debugger;
}
xxxxxxxxxx1
<t t-js="ctx">2
if (window.odoo._modules.indexOf("base_import") >= 0) {3
r.push(context.engine.tools.call(context, 'ImportView.import_button', dict));4
};5
</t>已复制
这个拼js的复用xml，很屌啊。。。
xxxxxxxxxx1
<t t-js="d">2
var message = (d.message !== undefined) ? d.message : d.error.data.message;3
d.html_error = context.engine.tools.html_escape(message).replace(/\n/g, '<br/>');4
</t>5
<t t-raw="html_error"/>已复制
6.其他资源参考
https://www.cnblogs.com/toby2chen/p/5198201.html 屌炸天，基础的几乎总结完了
使用字段以及 对widget
xxxxxxxxxx1
<span t-field="line.price_unit" t-options='{"widget": "monetary", "display_currency": o.currency_id}'/>2
已复制
闲外话：
jinja 也是模板渲染，感觉qweb也可以取代这玩意输出。。。 （ps:免得多学一套模板语法...汗😓,另外字段的显示也方便，不用特意去生成对对应的值，尤其是关系型字段 ) , 官方report 也用的qweb 渲染
t-foreach, t-extend 扩展也很实用，看官方文档就好。。。