forked from mystiq/hydrogen-web
Restructure and add syntax
Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>
This commit is contained in:
parent
4d79279f42
commit
9e9099f5d0
1 changed files with 36 additions and 7 deletions
|
@ -1,16 +1,45 @@
|
|||
There are two options to render DOM elements:
|
||||
- Use `tag` from `ui/general/html.js`
|
||||
- Use `TemplateBuilder` object (t) from the render function in the view.
|
||||
tldr; Use `tag` from `ui/general/html.js` to quickly create DOM elements.
|
||||
|
||||
## Syntax
|
||||
---
|
||||
The general syntax is as follows:
|
||||
```js
|
||||
tag.tag_name({attribute1: value, attribute2: value, ...}, [child_elements]);
|
||||
```
|
||||
**tag_name** can be any one of the following:
|
||||
```
|
||||
br, a, ol, ul, li, div, h1, h2, h3, h4, h5, h6,
|
||||
p, strong, em, span, img, section, main, article, aside,
|
||||
pre, button, time, input, textarea, label, form, progress, output, video
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
eg:
|
||||
Here is an example HTML segment followed with the code to create it in Hydrogen.
|
||||
```html
|
||||
<section class="main-section">
|
||||
<h1>Demo</h1>
|
||||
<button class="btn_cool">Click me</button>
|
||||
</section>
|
||||
```
|
||||
```js
|
||||
tag.section({className: "main-section"},[
|
||||
tag.h1("Demo"),
|
||||
tag.button({className:"btn_cool"}, "Click me")
|
||||
]);
|
||||
```
|
||||
<br />
|
||||
|
||||
**Note:** In views based on `TemplateView`, you will see `t` used instead of `tag`.
|
||||
`t` is is `TemplateBuilder` object passed to the render function in `TemplateView`.
|
||||
Although syntactically similar, they are not functionally equivalent.
|
||||
Primarily `tag` **does not support** bindings nor event handlers.
|
||||
Primarily `t` **supports** bindings and event handlers while `tag` **does not**.
|
||||
|
||||
```js
|
||||
// The onClick here wont work!!
|
||||
tag.button({className:"awesome-btn", onClick: () => this.foo()});
|
||||
```
|
||||
For these functionalities always use the TemplateBuilder object that is passed as argument to the render method.
|
||||
```js
|
||||
|
||||
render(t, vm){
|
||||
// The onClick works here.
|
||||
t.button({className:"awesome-btn", onClick: () => this.foo()});
|
||||
|
|
Loading…
Reference in a new issue