iT邦幫忙

2023 iThome 鐵人賽

DAY 15
0
Odoo

Odoo 14 Javascript 開發心路歷程系列 第 15

Day 15 widget 使用模板的三種方式

  • 分享至 

  • xImage
  •  

前兩天有提到自定義模板的部分

筆者目前知道的方式主要有 3 種方式

  1. 定義 tagName

    這個不能算是使用模板,但這裡也可以想像成沒有定義模板,

    odoo js 會依照 tagName 定義的來產生 Dom 物件,帶各位看一下原始碼

    // addons/web/static/src/js/core/widget.js
    var Widget = core.Class.extend(mixins.PropertiesMixin, ServicesMixin, {
        // Backbone-ish API
        tagName: 'div',
        id: null,
        className: null,
        attributes: {},
    
    		// ...
    });
    

    很明顯看到預設為 div

    所以假設新增了一個 widget,沒有改 TagName 的情況,預設就是 div

    接著看一下前幾天繼承的 FieldText

    // addons/web/static/src/js/fields/basic_fields.js
    var FieldText = InputField.extend(TranslatableFieldMixin, {
        description: _lt("Multiline Text"),
        className: 'o_field_text',
        supportedFieldTypes: ['text', 'html'],
        tagName: 'span',
    
    		// ...
    });
    

    繼承後改成 span ,所以把 $el 用 console.log 印出後就會指向是 span 的 dom 物件

    id , className , attributes 就是各位常見的 dom 物件屬性

  2. 定義 template

    前天在 __manifest__.py 定義的 qweb 的 list

    是預設網頁載入時,會整包在第一時間丟到前端

    而 template 就是從這包去取得對應的模板

    像是 widget binary 就有使用模板

    // addons/web/static/src/js/fields/basic_fields.js
    var FieldBinaryFile = AbstractFieldBinary.extend({
        description: _lt("File"),
        template: 'FieldBinaryFile',
    		// ...
    });
    
  3. 繼承 _render , _renderReadOnly , _renderEdit 來自行套用模板

    這樣做有個優點,依照當前值的狀態來決定要使用什麼模板

    也能把模板拆得更乾淨

    缺點是比較麻煩,像是大家看到的 tree view,就是用這三個階段來完成畫面

    這就是為什麼資料量大的時候,畫面會卡一下


上一篇
Day 14 實作 6: 增加一個屬於自己的 field widget 吧 part 3
下一篇
Day 16 中場休息 - 後半個月的目標
系列文
Odoo 14 Javascript 開發心路歷程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言