mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[REF] qweb: rename loadTemplates into addTemplates
This commit is contained in:
+47
@@ -3,6 +3,7 @@
|
|||||||
## Content
|
## Content
|
||||||
|
|
||||||
- [Overview](#overview)
|
- [Overview](#overview)
|
||||||
|
- [QWeb Engine](#qweb-engine)
|
||||||
- [QWeb Specification](#qweb-specification)
|
- [QWeb Specification](#qweb-specification)
|
||||||
- [Static html nodes](#static-html-nodes)
|
- [Static html nodes](#static-html-nodes)
|
||||||
- [`t-esc` directive](#t-esc-directive)
|
- [`t-esc` directive](#t-esc-directive)
|
||||||
@@ -40,8 +41,54 @@ necessary for the component system. In addition, it has a few extra directives
|
|||||||
(see [OWL Specific Extensions](#owlspecificextensions))
|
(see [OWL Specific Extensions](#owlspecificextensions))
|
||||||
|
|
||||||
|
|
||||||
|
## QWeb Engine
|
||||||
|
|
||||||
|
This section is about the javascript code that implements the `QWeb` specification.
|
||||||
|
Owl exports a `QWeb` class in `owl.QWeb`. To use it, it just needs to be
|
||||||
|
instantiated:
|
||||||
|
|
||||||
|
```js
|
||||||
|
const qweb = new owl.QWeb();
|
||||||
|
```
|
||||||
|
|
||||||
|
It's API is quite simple:
|
||||||
|
|
||||||
|
- **`constructor(data)`**: constructor. Takes an optional string to add initial
|
||||||
|
templates (see `addTemplates` for more information on format of the string).
|
||||||
|
|
||||||
|
```js
|
||||||
|
const qweb = new owl.QWeb(TEMPLATES);
|
||||||
|
```
|
||||||
|
|
||||||
|
- **`addTemplate(name, xmlStr)`**: add a specific template.
|
||||||
|
|
||||||
|
```js
|
||||||
|
qweb.addTemplate('mytemplate', '<div>hello</div>');
|
||||||
|
```
|
||||||
|
|
||||||
|
- **`addTemplates(xmlStr)`**: add a list of templates (identified by `t-name`
|
||||||
|
attribute).
|
||||||
|
|
||||||
|
```js
|
||||||
|
const TEMPLATES = `
|
||||||
|
<templates>
|
||||||
|
<div t-name="App" class="main">main</div>
|
||||||
|
<div t-name="OtherWidget">other widget</div>
|
||||||
|
</templates>`;
|
||||||
|
qweb.addTemplates(TEMPLATES);
|
||||||
|
```
|
||||||
|
|
||||||
|
- **`render(name, context, extra)`**: renders a template. This returns a `vnode`,
|
||||||
|
which is a virtual representation of the DOM (see [vdom doc](vdom.md)).
|
||||||
|
|
||||||
|
```js
|
||||||
|
const vnode = qweb.render('App', widget);
|
||||||
|
```
|
||||||
|
|
||||||
## QWeb Specification
|
## QWeb Specification
|
||||||
|
|
||||||
|
We define in this section the specification of how `QWeb` templates should be
|
||||||
|
rendered.
|
||||||
|
|
||||||
### Static html nodes
|
### Static html nodes
|
||||||
|
|
||||||
|
|||||||
@@ -174,7 +174,7 @@ class App extends owl.Component {
|
|||||||
var error = false;
|
var error = false;
|
||||||
const sanitizedXML = this.state.xml.replace(/<!--[\s\S]*?-->/g, "");
|
const sanitizedXML = this.state.xml.replace(/<!--[\s\S]*?-->/g, "");
|
||||||
try {
|
try {
|
||||||
qweb.loadTemplates(sanitizedXML);
|
qweb.addTemplates(sanitizedXML);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
error = e;
|
error = e;
|
||||||
}
|
}
|
||||||
|
|||||||
+18
-17
@@ -134,7 +134,7 @@ export class QWeb {
|
|||||||
|
|
||||||
constructor(data?: string) {
|
constructor(data?: string) {
|
||||||
if (data) {
|
if (data) {
|
||||||
this.loadTemplates(data);
|
this.addTemplates(data);
|
||||||
}
|
}
|
||||||
this.addTemplate("default", "<div></div>");
|
this.addTemplate("default", "<div></div>");
|
||||||
}
|
}
|
||||||
@@ -167,6 +167,23 @@ export class QWeb {
|
|||||||
this._addTemplate(name, <Element>doc.firstChild);
|
this._addTemplate(name, <Element>doc.firstChild);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load templates from a xml (as a string). This will look up for the first
|
||||||
|
* <templates> tag, and will consider each child of this as a template, with
|
||||||
|
* the name given by the t-name attribute.
|
||||||
|
*/
|
||||||
|
addTemplates(xmlstr: string) {
|
||||||
|
const doc = parseXML(xmlstr);
|
||||||
|
const templates = doc.getElementsByTagName("templates")[0];
|
||||||
|
if (!templates) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
for (let elem of <any>templates.children) {
|
||||||
|
const name = elem.getAttribute("t-name");
|
||||||
|
this._addTemplate(name, elem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
_addTemplate(name: string, elem: Element) {
|
_addTemplate(name: string, elem: Element) {
|
||||||
if (name in this.templates) {
|
if (name in this.templates) {
|
||||||
throw new Error(`Template ${name} already defined`);
|
throw new Error(`Template ${name} already defined`);
|
||||||
@@ -224,22 +241,6 @@ export class QWeb {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/**
|
|
||||||
* Load templates from a xml (as a string). This will look up for the first
|
|
||||||
* <templates> tag, and will consider each child of this as a template, with
|
|
||||||
* the name given by the t-name attribute.
|
|
||||||
*/
|
|
||||||
loadTemplates(xmlstr: string) {
|
|
||||||
const doc = parseXML(xmlstr);
|
|
||||||
const templates = doc.getElementsByTagName("templates")[0];
|
|
||||||
if (!templates) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
for (let elem of <any>templates.children) {
|
|
||||||
const name = elem.getAttribute("t-name");
|
|
||||||
this._addTemplate(name, elem);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
/**
|
||||||
* Render a template
|
* Render a template
|
||||||
*
|
*
|
||||||
|
|||||||
+3
-3
@@ -100,7 +100,7 @@ describe("error handling", () => {
|
|||||||
|
|
||||||
test("loadTemplates throw if parser error", () => {
|
test("loadTemplates throw if parser error", () => {
|
||||||
expect(() => {
|
expect(() => {
|
||||||
qweb.loadTemplates("<templates><abc>></templates>");
|
qweb.addTemplates("<templates><abc>></templates>");
|
||||||
}).toThrow("Invalid XML in template");
|
}).toThrow("Invalid XML in template");
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -1016,14 +1016,14 @@ describe("loading templates", () => {
|
|||||||
|
|
||||||
<ul t-name="main"><t t-call="items"/></ul>
|
<ul t-name="main"><t t-call="items"/></ul>
|
||||||
</templates>`;
|
</templates>`;
|
||||||
qweb.loadTemplates(data);
|
qweb.addTemplates(data);
|
||||||
const result = renderToString(qweb, "main");
|
const result = renderToString(qweb, "main");
|
||||||
expect(result).toBe("<ul><li>ok</li><li>foo</li></ul>");
|
expect(result).toBe("<ul><li>ok</li><li>foo</li></ul>");
|
||||||
});
|
});
|
||||||
|
|
||||||
test("does not crash if string does not have templates", () => {
|
test("does not crash if string does not have templates", () => {
|
||||||
const data = "";
|
const data = "";
|
||||||
qweb.loadTemplates(data);
|
qweb.addTemplates(data);
|
||||||
expect(Object.keys(qweb.templates)).toEqual(["default"]);
|
expect(Object.keys(qweb.templates)).toEqual(["default"]);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user