zoukankan      html  css  js  c++  java
  • odoo10学习笔记八:qweb引擎

    转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/11189307.html

    一:简介

    QWeb是一个基于xml的模板引擎,用于生成HTML片段和页面,模板指令是写在xml标签中的以t-开头的属性,比如t-if
    如果要让一个标签不被渲染,可以采用t来包裹,这样会执行它里面的命令但是不产生任何输出。【从这一点看,类似于jsp。】

    template

    创建一个QWeb视图,只需要一个arch元素并包含以下的属性:

    • id -- 视图的id
    • name, inherit_id, priority 与ir.ui.view的一致
    • primary -- 设置为True并与inherit_id一起使用时,设置为主视图
    • groups -- 以逗号分隔的分组id
    • page -- 设置为True时,该页面为网页
    • optional -- enabled 或 disabled,在用户界面中是否可以被禁用,默认是可以禁用

    二:XML标签

    1:输出内容

    <p><t t-esc="要显示的内容"/></p>

    2:条件语句:t-if属性值为True时,输出t标签包含内容

    复制代码
    复制代码
    <div>
        <t t-if="condition">
            <p>ok</p>
        </t>
    </div>
    
    #当condition是true的时候解析成:
    <div>
        <p>ok</p>
    </div>
    
    #condition为false的时候解析成
    <div>
    </div>
    复制代码
    复制代码

    还有t-elif/t-else:

    <div>
        <p t-if="user.birthday == today()">Happy bithday!</p>
        <p t-elif="user.login == 'root'">Welcome master!</p>
        <p t-else="">Welcome!</p>
    </div>

    3:循环

    t-foreach用来指定需要循环处理的数据,t-as提供的是在后面用于代表当前项目的变量名。

    复制代码
    复制代码
    <t t-foreach="[1, 2, 3]" t-as="i">
        <p><t t-esc="i"/></p>
    </t>
    #上述语句输出:
    <p>1</p>
    <p>2</p>
    <p>3</p>
    复制代码
    复制代码

    4:属性

    qweb可以对属性进行实时计算并在输出时设置,通过t-attr来实现,有三种形式:

    1)t-att-属性名 可以根据属性名创建一个属性:

    <div t-att-a="42"/>  //创建属性a,属性值为42
    #输出
    <div a="42"></div>

    属性值也可以为一个 格式化字符串,可以在运行期间确定具体值,作为属性值

    <li t-attf-class="row {{ item_parity }}">//item_parity在运行时确定值

    2)t-att=mapping 如果参数是映射表,每个键值对会生成一个属性:

    <div t-att="{'a': 1, 'b': 2}"/>
    #输出
    <div a="1" b="2"></div>

    3)t-att=pair 如果参数是元组或2个元素的数组,那么第一个项就作为属性名,第二个作为属性值:

    <div t-att="['a', 'b']"/>
    #输出
    <div a="b"></div>

    5:设置变量

    使用t-set属性来实现变量声明,它的值就是设置的变量名。然后用t-value属性的属性值作为新变量的值。

    <t t-set="foo" t-value="2 + 1"/>
    <t t-esc="foo"/>
    #输出3

    6:调用子模板

    <t t-call="other-template"/>会调用指定名字的模板

    三:Python专用指令

    1:格式化纪录

    • t-field只能用于格式化记录字段(从browe函数获取到的),可以根据字段类型自动匹配格式
    • t-options只能用于自定义字段,最常用的是widget,其他的选项都是field-xxwidget-xx

    2:在controller中渲染模版

    response = http.request.render('my-template', {
        'context_value': 42
    })
    #会直接从controller里返回一个响应对象

    3:在视图中渲染模版

    ir.ui.view:中的render方法:

    • render(cr, uid, id[, values][, engine='ir.qweb][, context])
      通过view的数据库id来渲染一个qweb视图模板,模板在ir.ui.view记录会自动加载,它会为渲染环境设置一系列默认值
      • request - 当前WebRequest对象
      • debug - 当前请求是否是debug模式
      • quote_plus - 是否进行url encode转义
      • json - 相关的标准库
      • time - 相关的标准库
      • datetime - 相关的标准库
      • relativedelta - model的时间处理属性
      • keep_query - 一个keep_query函数,参数1:values-传递给qweb的上下文环境,参数2:engine (str) 用于qweb渲染的odoo模型名

    四:JS专用指令

    1:定义模板

    <templates>
        <t t-name="template-name">
            <!-- template code -->
        </t>
    </templates>

    2:继承模板

    模板继承是用来修改已存在的模板,即给在其他模块定义的模板添加内容。

    通过t-extend来表示,它的值是被继承的模板名,通过t-jquery来进行修改。

    <t t-extend="base.template">
        <t t-jquery="ul" t-operation="append">
            <li>new element</li>
        </t>
    </t>

    t-jquery是一个css选择器,用于选择需要改变的节点,并通过t-operation指定需要进行的操作

      • append - 新节点的内容添加到原节点的后面(最后一个子节点后)
      • prepend - 新节点内容添加到原节点前面(第一个子节点前)
      • before - 新节点内容添加到原节点前
      • after - 新节点内容添加到原节点后
      • inner - 新节点内容替换原节点的子节点replace - 新节点内容直接替换原节点
      • 如果没有指定operation,那么模板内容会被解析成javascript节点,并将context节点设置为this

    五:调试指令

    1:t-log

    <t t-log="打印信息"/>

    2:断点调试t-debug

    <t t-if="condition">
        <t t-debug="">
    </t>

    3:t-js

    该节点内容里的javascript代码会在渲染时执行,接收一个context参数,将当前的环境传给js,从而可以使用context.XX调用上下文中的内容。

    <t t-js="ctx">
        console.log("var is", ctx.var);
    </t>
  • 相关阅读:
    BZOJ 1150 [CTSC2007]数据备份Backup(贪心+优先队列)
    BZOJ 1053 [HAOI2007]反素数ant(约数个数)
    BZOJ 1066 [SCOI2007]蜥蜴(最大流)
    CodeForces 772A Voltage Keepsake
    HDU 6030 Happy Necklace
    HDU 6031 Innumerable Ancestors
    HDU 6026 Deleting Edges
    HDU 6024 Building Shops
    HDU 6029 Graph Theory
    HDU 6025 Coprime Sequence
  • 原文地址:https://www.cnblogs.com/ygj0930/p/11189307.html
Copyright © 2011-2022 走看看