<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="data:image/x-icon;base64,">
<title>issue: self.parent.property</title>
</head>
<body>
<h1>Testing self.parent.property inside child template</h1>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs@latest/dist/lemonade.js"></script>
<script>
function Hello() {
let self = this;
console.log('๐ ~ Inside Child Hello', {self});
let template = `<>
<h1>{{self.title}}</h1>
<h2>Name: {{self.parent.name}} | Email: {{self.parent.email}}</h2>
</>`;
return lemonade.element(template, self);
}
function App() {
let self = {
count:1,
name: 'Root',
email:'[email protected]'
};
self.count = 1;
let template = `<>
<Hello title="your title" />
<p>You clicked {{self.count}} times</p>
<button onclick="self.count++;">Click me</button>
</>`;
return lemonade.element(template, self, {Hello});
}
lemonade.render(App, document.getElementById('root'));
</script>
</body>
</html>