# track-component

> Component for track.

Latest version **0.0.19** (published 2018-04-19) · ISC license · 0 weekly downloads

## Install

```sh
npm install track-component
pnpm add track-component
yarn add track-component
bun add track-component
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.19 |
| Published | 2018-04-19 |
| First published | 2018-02-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 23.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | alfa-jpn |
| Maintainers | alfa-jpn |

## Links

- npm: https://www.npmjs.com/package/track-component
- Repository: https://github.com/yosami-framework/track-component
- Homepage: https://github.com/yosami-framework/track-component#readme
- Issues: https://github.com/yosami-framework/track-component/issues
- npm.io page: https://npm.io/package/track-component

## Recent versions

- 0.0.19 (latest) — 2018-04-19
- 0.0.18 — 2018-04-15
- 0.0.17 — 2018-04-06
- 0.0.16 — 2018-04-05
- 0.0.15 — 2018-04-01
- 0.0.14 — 2018-04-01
- 0.0.13 — 2018-03-30
- 0.0.12 — 2018-03-30
- 0.0.11 — 2018-03-29
- 0.0.10 — 2018-03-28
- 0.0.9 — 2018-03-25
- 0.0.8 — 2018-03-22
- 0.0.7 — 2018-03-20
- 0.0.6 — 2018-03-03
- 0.0.5 — 2018-02-24
- … 4 more at https://npm.io/package/track-component/versions

## README

# TrackComponent
Component for track.
This component is based on the Component of Mithril.js.

[![Build Status](https://travis-ci.org/yosami-framework/track-component.svg?branch=master)](https://travis-ci.org/yosami-framework/track-component)

## Installation

### npm

```shell
npm install track-component
```

## Usage

#### Write Component

`app/components/hoge.js`

```javascript
const TrackComponent = require('track-component');

class HogeComponent extends TrackComponent {
  static definer() {
    name('hoge'); // Define model name. **Required**
  }
}
```

#### Write view

`app/views/hoge.js`

```javascript
function(component) {
  return m('div', [
    m('h1', 'Hello!'),
  ]);
}
```

### Use multiple views.

hoge_component.js

```javascript
class HogeComponent extends TrackComponent {
  static definer() {
    name('hoge');        // Define model name. **Required**
    views('outer_hoge'); // Append view.
    views('inner_hoge'); // Append view.
  }
}
```

`app/views/outer_hoge.js`

```javascript
function(component, pipe, _yield) {
  return m('div', [
    m('h1', `Hello ${pipe.name}!`),
    _yield,
  ]);
}
```

`views/inner_hoge.js`

```javascript
function(component, pipe) {
  pipe.name = 'hoge'
  return m('p', 'yes!');
}
```

### Use ViewModel

#### Write ViewModel
`view_models/hoge.js`

```javascript
const TrackModel = require('track-view-model');

class Hoge extends TrackModel {
  static definer() {
    name('hoge'); // Define model name. **Required**
    accessor('piyo'); // Define `hoge.piyo` and `hoge.piyo=`
  }
}
```

#### Set value in component.

`app/components/hoge.js`
```javascript
class HogeComponent extends TrackComponent {
  static definer() {
    name('hoge');
    views('hoge');
  }

  oninit() {
    this.vm.piyo = 'PIYO!!!!!PIYO!!!!!';
    return super.oninit();
  }
}
```

#### Get value in view

`app/views/hoge.js`

```javascript
// @note Binding instance of view model.
function(component) {
  return m('div', [
    m('h1', this.piyo),
  ]);
}
```

### Assign global(window) event

```javascript
const TrackComponent = require('track-component');

class HogeComponent extends TrackComponent {
  static definer() {
    name('hoge');                // Define model name. **Required**
    event('scroll', 'onScroll'); // Add event listener for global(window).
  }

  onScroll(e) {
    console.log(e);
  }
}
```

### Mithril lifecycle method

```javascript
const TrackComponent = require('track-component');

class HogeComponent extends TrackComponent {
  static definer() {
    name('hoge'); // Define model name. **Required**
  }

  oninit() {
    super.oninit(); // Must call when Override lifecycle methods of Mithril.
  }
}
```

#### onattrschanged

This is track-component lifecycle method.

The `onattrschanged()` hooks is called after change component attributes.

```javascript
onattrschanged(newly, older) {
  // call
}
```

---
_Source: https://npm.io/package/track-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._