Comments (20)
But, @ref still a problem which only be fixed on version 3.
from lemonadejs.
That's correct.
from lemonadejs.
This is the best place to send your questions. In the classes render does not return lemonade.element
, only the template as the example below:
<html>
<script src="https://lemonadejs.net/v2/lemonade.js"></script>
<div id='root'></div>
<script>
class Counter extends lemonade.component {
constructor() {
super();
this.count = 1;
}
counter() {
this.count++;
}
render() {
return `
<>
<div>Counter: {{self.count}}</div><br>
<input type='button' onclick="self.counter()" value='Go' />
<input type='button' onclick="self.count = 0" value='Reset' />
</>
`;
}
}
lemonade.render(Counter, document.getElementById('root'));
</script>
</html>
from lemonadejs.
I am creating an example for you....
from lemonadejs.
It still does not work
<html>
<script src="https://lemonadejs.net/v2/lemonade.js"></script>
<div id='root'></div>
<script>
function FunctionComponent() {
let self = this;
let template = `<h1>{{self.title}}</h1>`;
return lemonade.element(template, self);
}
class ClassComponent extends lemonade.component {
render() {
return `<h1>{{self.title}}</h1>`;
}
}
function MainView() {
let template = `<>
<FunctionComponent title="Test message for function" />
<ClassComponent title="Test message for class" />
</>`;
return lemonade.element(template, self, { FunctionComponent, ClassComponent });
}
lemonade.render(MainView, document.getElementById('root'));
</script>
</html>
IMHO it is better to create examples in the documentation rather than just for me
from lemonadejs.
Yes, there a few examples worth uploading to the documentation. A new section for webcomponents will be added...
from lemonadejs.
In the current version, the self for classes goes in the constructor where you need to do the merge. When I was doing some tests I noticed that @ref is not working correctly so you need to create the reference in the parent manually.
We are currently working on LemonadeJS v3, which this issue will be addressed.
class Hello extends lemonade.component {
constructor(self) {
super(self);
// Initial self
Object.assign(this, self);
// Keep the reference of this instance in the parent
o.parent.hello = this;
}
render() {
return `<h1>{{self.title}}</h1>`;
}
}
function Test() {
// Get the attributes from the tag
let self = this;
// Title and year are declared in the parent template
let template = `<div>
<Hello title="The very best of 2022" />
<input type="button" onclick="self.hello.title = 'new title'" value="Change title"/>
</div>`;
return lemonade.element(template, self, { Hello });
}
lemonade.render(Test, document.getElementById('root'));
from lemonadejs.
It is now unclear the scenario described in this issue report is a bug or a feature.
The snippet throws an error: ReferenceError: Can't find variable: o
from lemonadejs.
Sorry, my bad... change o.parent.hello to self.parent.hello = this
from lemonadejs.
Cool, Object.assign()
does the trick. The final version of a custom_HTML5_Web_Component to LemonadeJS_component wrapper using a ES6 class so far looks like this:
Edit: less code by first setting defaults, then applying attribute values.
export class KnobComponent extends lemonade.component {
constructor(self) {
super(self);
// Defaults
this.min = 0;
this.max = 1;
this.value = 0;
// This will read values set by attributes
// for example: <KnobComponent min="1" max="100" value="1" />
Object.assign(this, self);
}
render() {
return `<g-knob
min="{{self.min}}"
max="{{self.max}}"
@bind="self.value">
</g-knob>`;
}
}
from lemonadejs.
More testing... initial state is now correctly set, but the component is not reactive. Just noticed this was sneaked into the example snippet, kinda defeats the purpose of the library...
<input type="button" onclick="self.hello.title = 'new title'" value="Change title"/>
The only complete solution is to forget ES6 classes and use functions which is totally fine but undocumented:
export function KnobComponent() {
let self = this;
const template = `<g-knob
min="{{self.min}}"
max="{{self.max}}"
@bind="self.value">
</g-knob>`;
return lemonade.element(template, self);
}
from lemonadejs.
I am not sure why is not working for you, but take a look here. It is reacting to the button...
https://jsfiddle.net/nf6a5o8u/5/
from lemonadejs.
This example focus on the discrepancies between function and class. It correctly sets the initial value (100) for both, because the class version contains the Object.assign()
hack. But then only the function component gets updated in response to the timer... do you think there is something wrong in this code?
<html>
<script src="https://lemonadejs.net/v2/lemonade.js"></script>
<div id='root'></div>
<script>
function FunctionComponent() {
let self = this;
let template = `<h1>{{self.value}}</h1>`;
return lemonade.element(template, self);
}
class ClassComponent extends lemonade.component {
constructor(self) {
super(self);
Object.assign(this, self);
}
render() {
return `<h1>{{self.value}}</h1>`;
}
}
function MainView() {
let self = this;
self.value = 100;
setInterval(() => {
self.value++;
}, 1000);
let template = `<>
<FunctionComponent value="{{self.value}}" />
<ClassComponent value="{{self.value}}" />
</>`;
return lemonade.element(template, self, { FunctionComponent, ClassComponent });
}
lemonade.render(MainView, document.getElementById('root'));
</script>
</html>
from lemonadejs.
Thanks, I will check that and come back to you
from lemonadejs.
Yes, that was an issue which has been fixed. Thanks for the example.
https://jsfiddle.net/nf6a5o8u/12/
from lemonadejs.
You don't need to use Object.assign anymore...
from lemonadejs.
I confirm everything now works as expected, thanks.
from lemonadejs.
By the way, is it possible to set a default state within the class implementation while retaining the ability of reading the initial state from attributes? or both things are mutually exclusive?
from lemonadejs.
Yes, you can overwrite the value from the initial value defined in the tag.
from lemonadejs.
This construct seems to work for every case, if there is a simpler/better way let me know.
constructor(self) {
super(self);
this.min = self.min || 0;
this.max = self.max || 1;
this.value = self.value || 0.5;
}
from lemonadejs.
Related Issues (20)
- contact not reachable HOT 1
- Incorrect CDN reference in Getting Started documentation HOT 1
- How To: strategy to keep the components in their respective js files... HOT 2
- The latest version of NPM was 3 years ago? HOT 1
- lemonade.apply doesn't have ext parameter HOT 1
- Render/Load/Mount a specific component on App's main container on menu clicks HOT 1
- bind & loop problem HOT 3
- Unable to access parent.properties inside child template! HOT 1
- <select> @bind @loop HOT 2
- indexOf and selected attribute, how to implement this in the template lemonade ? HOT 1
- Loop HOT 5
- Refresh data on newly added element in the dom after calling "apply" HOT 1
- Question: Is there expanded notations for @ref, @bind, @loop and @ready HOT 2
- Failed to refresh in nested UI object HOT 1
- Cannot use the import statement for loading LemonadeJS HOT 5
- Improving the syntax (inspiring from reactjs) HOT 1
- Incorrect lemonade.d.ts types HOT 2
- Render Field as HTML HOT 3
- Could Lemonadejs consist of expressions checking? HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from lemonadejs.