mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
+1
-1
@@ -87,7 +87,7 @@ class ClickCounter extends owl.Component {
|
|||||||
// Application initialization
|
// Application initialization
|
||||||
//------------------------------------------------------------------------------
|
//------------------------------------------------------------------------------
|
||||||
async function start() {
|
async function start() {
|
||||||
const templates = await owl.utils.loadTemplates("templates.xml");
|
const templates = await owl.utils.loadFile("templates.xml");
|
||||||
const env = {
|
const env = {
|
||||||
qweb: new owl.QWeb(templates)
|
qweb: new owl.QWeb(templates)
|
||||||
};
|
};
|
||||||
|
|||||||
+2
-1
@@ -39,7 +39,8 @@ owl
|
|||||||
debounce
|
debounce
|
||||||
escape
|
escape
|
||||||
loadJS
|
loadJS
|
||||||
loadTemplates
|
loadFile
|
||||||
|
shallowEqual
|
||||||
whenReady
|
whenReady
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
+15
-11
@@ -7,7 +7,7 @@ functions are all available in the `owl.utils` namespace.
|
|||||||
|
|
||||||
- [`whenReady`](#whenready): executing code when DOM is ready
|
- [`whenReady`](#whenready): executing code when DOM is ready
|
||||||
- [`loadJS`](#loadjs): loading script files
|
- [`loadJS`](#loadjs): loading script files
|
||||||
- [`loadTemplates`](#loadtemplates): loading xml files
|
- [`loadFile`](#loadfile): loading a file (useful for templates)
|
||||||
- [`escape`](#escape): sanitizing strings
|
- [`escape`](#escape): sanitizing strings
|
||||||
- [`debounce`](#debounce): limiting rate of function calls
|
- [`debounce`](#debounce): limiting rate of function calls
|
||||||
- [`shallowEqual`](#shallowequal): shallow object comparison
|
- [`shallowEqual`](#shallowequal): shallow object comparison
|
||||||
@@ -20,7 +20,7 @@ not ready yet, resolved directly otherwise). If called with a callback as
|
|||||||
argument, it executes it as soon as the DOM ready (or directly).
|
argument, it executes it as soon as the DOM ready (or directly).
|
||||||
|
|
||||||
```js
|
```js
|
||||||
Promise.all([loadTemplates(), owl.utils.whenReady()]).then(function([templates]) {
|
Promise.all([loadFile('templates.xml'), owl.utils.whenReady()]).then(function([templates]) {
|
||||||
const qweb = new owl.QWeb(templates);
|
const qweb = new owl.QWeb(templates);
|
||||||
const app = new App({ qweb });
|
const app = new App({ qweb });
|
||||||
app.mount(document.body);
|
app.mount(document.body);
|
||||||
@@ -39,11 +39,12 @@ owl.utils.whenReady(function() {
|
|||||||
|
|
||||||
## `loadJS`
|
## `loadJS`
|
||||||
|
|
||||||
`loadJS` takes a url (string) for a javascript resource, and loads it. It returns
|
`loadJS` takes a url (string) for a javascript resource, and loads it (by adding
|
||||||
a promise, so the caller can properly reacts when it is ready. Also, it is smart:
|
a script tag in the document head). It returns a promise, so the caller can
|
||||||
it maintains a list of urls previously loaded (or currently being loaded), and
|
properly reacts when it is ready. Also, it is smart: it maintains a list of urls
|
||||||
prevent doing twice the work.
|
previously loaded (or currently being loaded), and prevent doing twice the work.
|
||||||
|
|
||||||
|
For example, it is useful for lazy loading external libraries:
|
||||||
```js
|
```js
|
||||||
class MyComponent extends owl.Component {
|
class MyComponent extends owl.Component {
|
||||||
willStart() {
|
willStart() {
|
||||||
@@ -52,20 +53,23 @@ class MyComponent extends owl.Component {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
## `loadTemplates`
|
## `loadFile`
|
||||||
|
|
||||||
`loadTemplates` is a helper function to fetch a template file. It simply
|
`loadFile` is a helper function to fetch a file. It simply
|
||||||
performs a `GET` request and return the resulting string in a promise. For
|
performs a `GET` request and returns the resulting string in a promise. The
|
||||||
example:
|
initial usecase for this function is to load a template file. For example:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
async function makeEnv() {
|
async function makeEnv() {
|
||||||
const templates = await owl.utils.loadTemplates("templates.xml");
|
const templates = await owl.utils.loadFile("templates.xml");
|
||||||
const qweb = new owl.QWeb(templates);
|
const qweb = new owl.QWeb(templates);
|
||||||
return { qweb };
|
return { qweb };
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
Note that unlike `loadJS`, this function returns the content of the file as a
|
||||||
|
string. It does not add a `script` tag or any other side effect.
|
||||||
|
|
||||||
## `escape`
|
## `escape`
|
||||||
|
|
||||||
Sometimes, we need to display dynamic data (for example user-generated data) in
|
Sometimes, we need to display dynamic data (for example user-generated data) in
|
||||||
|
|||||||
@@ -219,7 +219,9 @@ QWeb.addDirective({
|
|||||||
`slot${slotKey}.call(this, context.__owl__.parent, Object.assign({}, extra, {parentNode: ${parentNode}, vars: extra.vars, parent: owner}));`
|
`slot${slotKey}.call(this, context.__owl__.parent, Object.assign({}, extra, {parentNode: ${parentNode}, vars: extra.vars, parent: owner}));`
|
||||||
);
|
);
|
||||||
if (!ctx.parentNode) {
|
if (!ctx.parentNode) {
|
||||||
ctx.addLine(`Promise.all(extra.promises).then(() => utils.defineProxy(result, ${parentNode}[0]))`);
|
ctx.addLine(
|
||||||
|
`Promise.all(extra.promises).then(() => utils.defineProxy(result, ${parentNode}[0]))`
|
||||||
|
);
|
||||||
}
|
}
|
||||||
ctx.closeIf();
|
ctx.closeIf();
|
||||||
return true;
|
return true;
|
||||||
|
|||||||
+2
-2
@@ -5,7 +5,7 @@
|
|||||||
*
|
*
|
||||||
* - whenReady
|
* - whenReady
|
||||||
* - loadJS
|
* - loadJS
|
||||||
* - loadTemplates
|
* - loadFile
|
||||||
* - escape
|
* - escape
|
||||||
* - debounce
|
* - debounce
|
||||||
*/
|
*/
|
||||||
@@ -43,7 +43,7 @@ export function loadJS(url: string): Promise<void> {
|
|||||||
return promise;
|
return promise;
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function loadTemplates(url: string): Promise<string> {
|
export async function loadFile(url: string): Promise<string> {
|
||||||
const result = await fetch(url);
|
const result = await fetch(url);
|
||||||
if (!result.ok) {
|
if (!result.ok) {
|
||||||
throw new Error("Error while fetching xml templates");
|
throw new Error("Error while fetching xml templates");
|
||||||
|
|||||||
@@ -79,7 +79,7 @@ describe("error handling", () => {
|
|||||||
expect(() => qweb.addTemplate("test", "<div/>")).toThrow("already defined");
|
expect(() => qweb.addTemplate("test", "<div/>")).toThrow("already defined");
|
||||||
});
|
});
|
||||||
|
|
||||||
test("loadTemplates throw if parser error", () => {
|
test("addTemplates throw if parser error", () => {
|
||||||
expect(() => {
|
expect(() => {
|
||||||
qweb.addTemplates("<templates><abc>></templates>");
|
qweb.addTemplates("<templates><abc>></templates>");
|
||||||
}).toThrow("Invalid XML in template");
|
}).toThrow("Invalid XML in template");
|
||||||
|
|||||||
@@ -144,7 +144,7 @@ class App extends owl.Component {
|
|||||||
// Application initialization
|
// Application initialization
|
||||||
//------------------------------------------------------------------------------
|
//------------------------------------------------------------------------------
|
||||||
async function start() {
|
async function start() {
|
||||||
const templates = await owl.utils.loadTemplates("templates.xml");
|
const templates = await owl.utils.loadFile("templates.xml");
|
||||||
const env = {
|
const env = {
|
||||||
qweb: new owl.QWeb(templates)
|
qweb: new owl.QWeb(templates)
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -127,7 +127,7 @@ async function makeApp(js, css, xml) {
|
|||||||
const JS = `
|
const JS = `
|
||||||
async function loadTemplates() {
|
async function loadTemplates() {
|
||||||
try {
|
try {
|
||||||
return owl.utils.loadTemplates('app.xml');
|
return owl.utils.loadFile('app.xml');
|
||||||
} catch(e) {
|
} catch(e) {
|
||||||
console.error(\`This app requires a static server. If you have python installed, try 'python app.py'\`);
|
console.error(\`This app requires a static server. If you have python installed, try 'python app.py'\`);
|
||||||
}
|
}
|
||||||
@@ -430,7 +430,7 @@ App.components = { TabbedEditor };
|
|||||||
async function start() {
|
async function start() {
|
||||||
document.title = `${document.title} (v${owl.__info__.version})`;
|
document.title = `${document.title} (v${owl.__info__.version})`;
|
||||||
const [templates] = await Promise.all([
|
const [templates] = await Promise.all([
|
||||||
owl.utils.loadTemplates("templates.xml"),
|
owl.utils.loadFile("templates.xml"),
|
||||||
owl.utils.whenReady()
|
owl.utils.whenReady()
|
||||||
]);
|
]);
|
||||||
const qweb = new owl.QWeb(templates);
|
const qweb = new owl.QWeb(templates);
|
||||||
|
|||||||
Reference in New Issue
Block a user