在 static/xml/new_template.xml 中建立新的模板 demo001

<?xml version="1.0" encoding="UTF-8"?>
<templates id="template001" xml:space="preserve">
    <t t-name="demo001">
        新模板
    </t>
</templates>

繼承已有模板，增加自定義內容

<?xml version="1.0" encoding="UTF-8" ?>
<templates id="template002" xml:space="preserve">       # id 最好是唯一標識
   <t t-extend="HrAttendanceMyMainMenu">                # t-extend 的值是要繼承的 t-name
        <t t-jquery=".o_hr_attendance_kiosk_mode"       # t-jquery 的值是JQ要定位的元素
           t-operation="append">                        # t-operation 的值是對JQ定位的元素進行的操作 append after before replace innner prepend
            <div>                                       # 自定義繼承內容
                <span style="color:red">自定義繼承內容</span>
            </div>                                      
        </t>
    </t>
</templates>
 

還可以使用自定義模板

<?xml version="1.0" encoding="UTF-8" ?>
<templates id="template003" xml:space="preserve">       # id 唯一標識
   <t t-extend="HrAttendanceMyMainMenu">                # t-extend 的值是要繼承的 t-name
        <t t-jquery=".o_hr_attendance_kiosk_mode"       # t-jquery 的值是JQ要定位的元素
           t-operation="append">                        # t-operation 的值是對JQ定位的元素進行的操作 ※
            <t t-call="demo001"/>                       # t-call 使用定義好的 t-name 模板                                    
        </t>
    </t>
</templates>
 

※ t-jquery 選擇器，用於定位元素，t-operation 對定位的元素進行操作

操作型別

append - 新節點的內容新增到原節點的後面（最後一個子節點後）

prepend - 新節點內容新增到原節點前面（第一個子節點前）

before - 新節點內容新增到原節點前

after - 新節點內容新增到原節點後

inner - 新節點內容替換原節點的子節點replace - 新節點內容直接替換原節點

如果沒有指定operation，那麼模板內容會被解析成javascript節點，並將context節點設定為this