mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
imp: improve code samples to make them work on firefox
This commit is contained in:
+36
-12
@@ -1,4 +1,20 @@
|
|||||||
const HELLO_WORLD = `class HelloWorld extends owl.core.Component {
|
const HELLO_WORLD = `class HelloWorld extends owl.core.Component {
|
||||||
|
constructor(...args) {
|
||||||
|
super(...args);
|
||||||
|
this.inlineTemplate = \`<div>Hello <t t-esc="props.name"/></div>\`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const env = {
|
||||||
|
qweb: new owl.core.QWeb()
|
||||||
|
};
|
||||||
|
|
||||||
|
const hello = new HelloWorld(env, { name: "World" });
|
||||||
|
hello.mount(document.body);
|
||||||
|
`;
|
||||||
|
|
||||||
|
const HELLO_WORLD_ESNEXT = `// This example will not work if your browser does not support ESNext Class Fields
|
||||||
|
class HelloWorld extends owl.core.Component {
|
||||||
inlineTemplate = \`<div>Hello <t t-esc="props.name"/></div>\`;
|
inlineTemplate = \`<div>Hello <t t-esc="props.name"/></div>\`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -11,15 +27,15 @@ hello.mount(document.body);
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
const WIDGET_COMPOSITION = `class Counter extends owl.core.Component {
|
const WIDGET_COMPOSITION = `class Counter extends owl.core.Component {
|
||||||
inlineTemplate = \`
|
|
||||||
<div>
|
|
||||||
<button t-on-click="increment(-1)">-</button>
|
|
||||||
<span style="font-weight:bold">Value: <t t-esc="state.value"/></span>
|
|
||||||
<button t-on-click="increment(1)">+</button>
|
|
||||||
</div>\`;
|
|
||||||
|
|
||||||
constructor(parent, props) {
|
constructor(parent, props) {
|
||||||
super(parent, props);
|
super(parent, props);
|
||||||
|
this.inlineTemplate = \`
|
||||||
|
<div>
|
||||||
|
<button t-on-click="increment(-1)">-</button>
|
||||||
|
<span style="font-weight:bold">Value: <t t-esc="state.value"/></span>
|
||||||
|
<button t-on-click="increment(1)">+</button>
|
||||||
|
</div>\`;
|
||||||
this.state = {
|
this.state = {
|
||||||
value: props.initialState || 0
|
value: props.initialState || 0
|
||||||
};
|
};
|
||||||
@@ -31,13 +47,17 @@ const WIDGET_COMPOSITION = `class Counter extends owl.core.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
class App extends owl.core.Component {
|
class App extends owl.core.Component {
|
||||||
inlineTemplate = \`
|
|
||||||
<div>
|
|
||||||
<t t-widget="Counter" t-props="{initialState: 1}"/>
|
|
||||||
<t t-widget="Counter" t-props="{initialState: 42}"/>
|
|
||||||
</div>\`;
|
|
||||||
|
|
||||||
widgets = { Counter };
|
constructor(...args) {
|
||||||
|
super(...args);
|
||||||
|
this.inlineTemplate = \`
|
||||||
|
<div>
|
||||||
|
<t t-widget="Counter" t-props="{initialState: 1}"/>
|
||||||
|
<t t-widget="Counter" t-props="{initialState: 42}"/>
|
||||||
|
</div>\`;
|
||||||
|
this.widgets = { Counter };
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const env = {
|
const env = {
|
||||||
@@ -58,6 +78,10 @@ export const SAMPLES = [
|
|||||||
description: "Hello World",
|
description: "Hello World",
|
||||||
code: HELLO_WORLD
|
code: HELLO_WORLD
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
description: "Hello World (ESNext)",
|
||||||
|
code: HELLO_WORLD_ESNEXT
|
||||||
|
},
|
||||||
{
|
{
|
||||||
description: "Widget Composition",
|
description: "Widget Composition",
|
||||||
code: WIDGET_COMPOSITION
|
code: WIDGET_COMPOSITION
|
||||||
|
|||||||
Reference in New Issue
Block a user