前兩天有提到自定義模板的部分
筆者目前知道的方式主要有 3 種方式
定義 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 物件屬性
定義 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',
// ...
});
繼承 _render
, _renderReadOnly
, _renderEdit
來自行套用模板
這樣做有個優點,依照當前值的狀態來決定要使用什麼模板
也能把模板拆得更乾淨
缺點是比較麻煩,像是大家看到的 tree view,就是用這三個階段來完成畫面
這就是為什麼資料量大的時候,畫面會卡一下