https://github.com/markknol/coconut.questions
coconut.ui questions / answers
https://github.com/markknol/coconut.questions
Last synced: about 1 year ago
JSON representation
coconut.ui questions / answers
- Host: GitHub
- URL: https://github.com/markknol/coconut.questions
- Owner: markknol
- Created: 2019-07-10T13:53:26.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2021-01-26T10:23:56.000Z (over 5 years ago)
- Last Synced: 2025-01-25T05:11:29.102Z (over 1 year ago)
- Homepage:
- Size: 24.4 KB
- Stars: 9
- Watchers: 5
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Haxe Coconut.ui questions
> Questions / answers about [coconut.ui](https://github.com/MVCoconut/).
---
## How to set attributes based on a condition
Question
This doesn't seem to work: ``
Answer
For css classes, I suggest
* ` true, "active" => isActive]}`
* or ` isActive]}`.
It's using this abstract:
## How do you declare some var inside a render function?
Answer
* One option is `function render() { var x = 123; return @hxx'{x}'; }`
* Or you use ``:
## Why doesn't float translate to a renderable
Question
I get error `Float should be coconut.ui.RenderResult`
Answer
That's on purpose, because e.g. in Spanish `1.234` means `1234`. In general you don't want `1.40632469e12` to be shown to user, so developers are forced to write their own float to string functions.
## How to render an empty fragment
Anwer
- Use `<>>` for an empty fragment
- If it's an ``, it is fine to not have an `` branch
## How to pass a class in custom render function?
Question
Let's say I have `w00t`
And this render runction: `function custom(attr:{class:String}) '
'`
How do you define `attr.class`?
Answer
* Rename the attribute `class` to `className` and use `className:tink.domspec.ClassName`
* More info:
## How to use an optional callback?
Question
I have `@:attribute function handleClose():Void;`
Answer
Give it a body, that'll be the default behavior so it's always safe to call.
```haxe
@:attribute function handleClose():Void {};
```
As alternative, you can use otherwise (that'll allow it to actually be nullable)
```haxe
@:attribute var handeClose:()->Void = null;
```
## How to access children within custom render function?
Question
If you have `Wow` which is a render function defined like this `function custom(attr:{})`, is it possible to get/render its children too?
Answer
Yep, this is as simple as:
```haxe
function custom(attr:{children:coconut.ui.Children}) '
${...attr.children}';
```
* You can pass children as second argument as well
* The rules are a bit complex, to allow for different styles:
## How to update page title with a component?
Answer
```haxe
import js.Browser.document;
class PageInfo extends coconut.ui.View {
@:tracked @:attribute var title:String;
@:tracked @:attribute var description:String;
function render() return null;
function viewDidRender(_) {
document.title = title;
for (e in document.querySelectorAll('title'))
e.textContent = title;
for (e in document.querySelectorAll('meta[name="description]'))
(cast e:js.html.Element).setAttribute("content", description);
}
}
```
This works as simple as ``. It updates nicely when the values change :smiley:
That said, if you have the data in a model, you should rather apply it to the document via binding: `pageInfo.observables.title.bind(t -> document.title = t)`.
## Can I change styles in `RenderResult`?
Answer
Generally you can't modify `RenderResult` because it is a implementation detail and should not be touched. Instead (if you want to change font-size for example) you should pass the styles with a function like this:
```haxe
@:attr var renderChildren:(fontSize:Int)->coconut.ui.Children;
function render() '<>{...renderChildren(10)}>';
```
## How to render an space without ` `?
Question
In some cases you want to render actual spaces and avoid non-breaking spaces. How to render an space without ?
Answer
Use ${" "}
It dumps in a text node and after that the white space rules of the parent html element do their thing.
## How to an approach inline scope inside a view?
Question
Is it possible to create/define a new observable scope within the view? Something like this:
```jsx
${Std.string(enabled)}
enable
disable
```
Answer
It sorta depends on what you need, that thing will reset when the parent rerenders. You could try something like this:
```haxe
class Stateful extends View {
@:attribute var init:Void->T;
@:attribute var content:{ final state:T; }->RenderResult;
var adhocState:T;
function render() {
if (adhocState == null) adhocState = init();
return content({ state: adhocState });
}
}
```
Then use it like this:
```jsx
new SomeModel({ enabled: false })}>
enable
disable
```
> Cool, how does `` work here?
Childless views have their child notes interpreted as attributes, a feature I termed [complex attributes](https://github.com/haxetink/tink_hxx/#complex-attributes)
## How to pass non-observable array as attribute
Question
Problem: I don't want to convert to observable list, because it is just for some calculation. It's ok that the list doesn't update when an item is pushed to the array.
I get the error _"`Array` is not observable, because `Array` is not observable because the field \"length\" is mutable"_
Answer
1. Use `@:skipCheck`
```haxe
@:skipCheck @:attribute var plainArray:Array;
```
2. Use `@:pure`
```haxe
@:pure typedef PureArray = Array;
```
3. or use `@:observable` instead of `@:pure` in example above
## Are there coconut.ui components to handle routing ?
Answer
1. If you want simple location hash and assuming the state is all in one place, then you could do something like `function viewDidMount() { window.onhashchange = function () {/* set states from hash here*/}; Observable.auto(() -> /* compute url from states*/).bind(url -> window.location.hash = url)}`. `Observable.auto` is what's underpinning every `@:computed` property
and in essence a coconut view is something like `Observable.auto(this.render).bind(applyVDom)`.
1. If you like a more elegant solution, check this out
---