mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[DOC] update changelog renderToString example
This commit is contained in:
committed by
Aaron Bohy
parent
d828f39a2d
commit
700030cc7d
+29
-1
@@ -659,10 +659,14 @@ Also, this can easily be done in userspace, by mounting a component in a div. F
|
|||||||
export async function renderToString(template, context) {
|
export async function renderToString(template, context) {
|
||||||
class C extends Component {
|
class C extends Component {
|
||||||
static template = template;
|
static template = template;
|
||||||
|
setup () {
|
||||||
|
Object.assign(this, context);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
const div = document.createElement('div');
|
const div = document.createElement('div');
|
||||||
document.body.appendChild(div);
|
document.body.appendChild(div);
|
||||||
const component = await mount(C, div);
|
const app = new App(C);
|
||||||
|
await app.mount(div);
|
||||||
const result = div.innerHTML;
|
const result = div.innerHTML;
|
||||||
app.destroy();
|
app.destroy();
|
||||||
div.remove();
|
div.remove();
|
||||||
@@ -670,6 +674,30 @@ export async function renderToString(template, context) {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
The function above works for most cases, but is asynchronous. An alternative
|
||||||
|
function could look like this:
|
||||||
|
|
||||||
|
```js
|
||||||
|
const { App, blockDom } = owl;
|
||||||
|
const app = new App(Component); // act as a template repository
|
||||||
|
|
||||||
|
function renderToString(template, context = {}) {
|
||||||
|
app.addTemplate(template, template, { allowDuplicate: true });
|
||||||
|
const templateFn = app.getTemplate(template);
|
||||||
|
const bdom = templateFn(context, {});
|
||||||
|
const div = document.createElement('div')
|
||||||
|
blockDom.mount(bdom, div);
|
||||||
|
return div.innerHTML;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
This is a synchronous function, so it will not work with components, but it should
|
||||||
|
be useful for most simple templates.
|
||||||
|
|
||||||
|
Also note that these two examples do not translate their templates. To do that,
|
||||||
|
they need to be modified to pass the proper translate function to the `App`
|
||||||
|
configuration.
|
||||||
|
|
||||||
### 33. Portal are now defined with `t-portal`
|
### 33. Portal are now defined with `t-portal`
|
||||||
|
|
||||||
Before Owl 2, one could use the `Portal` component by importing it and using it.
|
Before Owl 2, one could use the `Portal` component by importing it and using it.
|
||||||
|
|||||||
Reference in New Issue
Block a user