一、模板内容的来源

情况A,组件类的template属性,比如ActionContainer.template

/* odoo/addons/web/static/src/webclient/actions/action_container.js */

export class ActionContainer extends Component {
    setup() {
        ..
    }
}
..
ActionContainer.template = xml`
    <t t-name="web.ActionContainer">
      <div class="o_action_manager">
        <t t-if="info.Component" t-component="info.Component" className="'o_action'" t-props="info.componentProps" t-key="info.id"/>
      </div>
    </t>`;

情况B,组件类的同名xml文件,比如webclient.xml

<!-- /* odoo/addons/web/static/src/webclient/webclient.xml */ -->

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <t t-name="web.WebClient" owl="1">
        <t t-if="!state.fullscreen">
            <NavBar/>
        </t>
        <ActionContainer/>
        <MainComponentsContainer/>
    </t>

</templates>

二、存放模板内容的变量

情况A,存放在owl.js文件中的globalTemplates变量中

/* odoo/addons/web/static/lib/owl/owl.js */

const globalTemplates = {};
function xml(...args) {
    const name = `__template__${xml.nextId++}`;
    const value = String.raw(...args);
    globalTemplates[name] = value;
    return name;
}
xml.nextId = 1;

情况B,通过app.addTemplates方法,将xml保存在TemplateSet的rawTemplates中,步骤如下

1 将各种xml文件打包到一个字符串templates中,然后调用loadXML方法处理templates

/* web.assets_backend.bundle.xml文件是由后台动态打包生成的 */

/*******************************************
                    *  Templates                               *
                    *******************************************/
odoo.define('web.assets_backend.bundle.xml', function(require) {
    'use strict';
    const {loadXML} = require('@web/core/assets');
    const templates = `<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
// xml文件的内容,做了省略处理
..
<t t-name="web.WebClient" owl="1">
        <t t-if="!state.fullscreen">
            <NavBar/>
        </t>
        <ActionContainer/>
        <MainComponentsContainer/>
    </t>
..
</templates>`;
    return loadXML(templates);
});

 2 设置app实例变量(注意:这里的app就是全局开始创建的唯一app实例)

/* odoo/addons/web/static/src/start.js */

export async function startWebClient(Webclient) {
    ..
    setLoadXmlDefaultApp(app);
    ..
}

3 loadXML方法将templates中的xml文本,按照t-name属性提取出来,以key/value形式保存

/* odoo/addons/web/static/src/core/assets.js */

let defaultApp;
/**
 * Loads the given xml template.
 *
 * @param {string} xml the string defining the templates
 * @param {App} [app=defaultApp] optional owl App instance (default value
 *      can be changed with setLoadXmlDefaultApp method)
 * @returns {Promise<true>} resolved when the template xml has been loaded
 */
export const _loadXML = (assets.loadXML = function loadXML(xml, app = defaultApp) {
    const doc = new DOMParser().parseFromString(xml, "text/xml");
    if (doc.querySelector("parsererror")) {
        throw doc.querySelector("parsererror div").textContent.split(":")[0];
    }

    for (const element of doc.querySelectorAll("templates > [t-name][owl]")) {
        element.removeAttribute("owl");
        const name = element.getAttribute("t-name");
        const previous = templates.querySelector(`[t-name="${name}"]`);
        if (previous) {
            console.debug("Override template: " + name);
            previous.replaceWith(element);
        } else {
            templates.documentElement.appendChild(element);
        }
    }
    if (app || defaultApp) {
        console.debug("Add templates in Owl app.");
        app.addTemplates(templates, app || defaultApp);
    } else {
        console.debug("Add templates on window Owl container.");
    }
});
/**
 * Update the default app to load templates.
 *
 * @param {App} app owl App instance
 */
export function setLoadXmlDefaultApp(app) {
    defaultApp = app;
}

三、将globalTemplates作为原型来创建this.rawTemplates属性,所以以后通过rawTemplates就能访问globalTemplates(前提是rawTemplates中没有要访问的属性时,才会访问globalTemplates,这是JS的原型链原理)

/* odoo/addons/web/static/lib/owl/owl.js */

class TemplateSet {
    constructor(config = {}) {
        this.rawTemplates = Object.create(globalTemplates);
        this.templates = {};
        ..
        if (config.templates) {
            this.addTemplates(config.templates);
        }
    }
    ..
}

因为App继承TemplateSet,并且App没有定义rawTemplates属性,所以app.addTemplates操作的是TemplateSet的rawTemplates

四、后面其他功能通过app.rawTemplates获取需要的模板

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐