# gap-front-view

> ## Install

Latest version **3.0.13** (published 2019-07-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install gap-front-view
pnpm add gap-front-view
yarn add gap-front-view
bun add gap-front-view
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.13 |
| Published | 2019-07-08 |
| First published | 2018-03-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 105.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | zhanjh |
| Maintainers | captainxu, cyjme, patrickstar, weiwenqiang, zhanjh |

## Links

- npm: https://www.npmjs.com/package/gap-front-view
- Repository: https://github.com/gaptree/gap-front-view
- Homepage: https://github.com/gaptree/gap-front-view#readme
- Issues: https://github.com/gaptree/gap-front-view/issues
- npm.io page: https://npm.io/package/gap-front-view

## Dependencies (2)

- [gap-front-web](https://npm.io/package/gap-front-web.md) ^1.2.11
- [gap-front-event](https://npm.io/package/gap-front-event.md) ^2.0.0

## Recent versions

- 3.0.13 (latest) — 2019-07-08
- 3.0.12 — 2018-12-12
- 3.0.11 — 2018-12-12
- 3.0.10 — 2018-08-20
- 3.0.9 — 2018-08-17
- 3.0.8 — 2018-08-16
- 3.0.7 — 2018-08-15
- 3.0.6 — 2018-08-14
- 3.0.5 — 2018-08-13
- 3.0.4 — 2018-08-13
- 3.0.3 — 2018-08-10
- 3.0.2 — 2018-08-10
- 3.0.1 — 2018-08-08
- 3.0.0 — 2018-08-08
- 2.8.1 — 2018-07-07
- … 63 more at https://npm.io/package/gap-front-view/versions

## README

# gap-front-view

## Install

```sh
yarn add gap-front-view
```

## Quik Start

### Bind HtmlElement's propertes and attributes

```javascript
import {View} from 'gap-front-view';

class UserView extends Veiw {
    template() {
        return this.html`
            <form action="javascript:;">
                <input
                    name="userId"
                    bind-value="userId"
                    bind-id="userId"
                >
                <input
                    name="name"
                    bind-value="name"
                >
            </form>
        `;
    }
}

const userView = new UserView();

userView.update({
    userId: 'userId',
    name: 'Mike'
})
```

### Bind text

```javascript
import {View} from 'gap-front-view';

class UserView extends View {
    template() {
        return this.html`
        <div>
            $${'user.name'} - $${'user.address'}
        </div>
        `;
    }
}

const userView = new UserView();
userView.update({
    user: {
        name: 'tom',
        address: 'china'
    }
})
```

### Include sub template

```javascript
import {View} from 'gap-front-view';

class BookView extends View {
    template() {
        return this.html`
        <div>
            <span class="book-title">$${'book.title'}</span>
            <div class="book-author">
            ${this.getAuthorTpl()}
            </div>
        </div>
        `;
    }

    getAuthorTpl() {
        return this.html`
        <span>$${'book.author.name'} - $${'book.author.address'}</span>
        `;
    }
}

const bookView = new BookView();
bookView.update({
    book: {
        title: 'Real Analysis, Fourth Edition',
        author: {
            name: 'mike',
            address: 'usa'
        }
    }
});
```

### Include sub view

Bind one property of current data

```javascript
class UserView extends View {
    template() {
        return this.html`
        <div class="user-view">$${'name'} - $${'address'}</div>
        `;
    }
}

class BookView extends View {
    template() {
        return this.html`
        <div>
            <span class="book-title">$${'book.title'}</span>
            <div class="book-author">
            <gap-view
                view=${new UserView()}
                bind="book.author"
            ></gap-view>
            <div class="author">
                $${'book.author.name'} - $${'book.author.address'}
            </div>
            </div>
        </div>
        `;
    }
}

const bookView = new BookView();
bookView.appendTo(document.body);

bookView.update({
    book: {
        title: 'time history',
        author: {
            name: 'jack',
            address: 'yk'
        }
    }
});
```

Bind multi properties of current data

```javascript
class CoverView extends View {
    template() {
        return this.html`
        <div class="cover">
            $${'title'} - $${'author.name'} - $${'author.address'}
        </div>
        `;
    }
}

class BookView extends View {
    template() {
        return this.html`
        <div>
            <span class="book-title">$${'book.title'}</span>
            <div class="book-author">
            <gap-view
                ref=${view => this.coverView = view}
                view=${new CoverView()}
                bind-multi=${{
                    title: 'book.title',
                    'author.name': 'book.author.name',
                    'author.address': 'book.author.address'
                }}
            ></gap-view>
            </div>
        </div>
        `;
    }
}
```

### use component

```javascript
import {View} from '../index';

class AuthorView extends View {
    template() {
        return this.html`
            <div class="author"><span>${this.props.name}</span>$${'age'}</div>
        `;
    }
}

class DetailView extends View {
    template() {
        return this.html`
            <div class="detail">$${'title'}</div>
        `;
    }
}

// global register
View.regComponent('author-view', AuthorView);

class BookView extends View {
    template() {
        return this.html`
            <div class="book">
                <author-view props=${{'name': 'gap'}} bind-age="age"></author-view>
                <book-detail bind-title="title"></book-detail>
            </div>
        `;
    }

    // local register
    component() { return {'book-detail': DetailView}; }
}
```

### Handle array

```javascript
class UserListView extends View {
    template() {
        return this.html`
        <div
            arr="users"
            item-as="user"
            item-key=${user => user.name}
        >
            ${() => this.html`
                <span bind-id="user.userId">
                    $${'user.name'}
                    -
                    $${'user.age'}
                    -
                    $${'user.address'}
                </span>
            `}
        </div>
        `;
    }
}

const userListView = new UserListView();
userListView.update({
    users: [
        {userId: 'id1', name: 'jack', age: 10, address: 'sh'},
        {userId: 'id2', name: 'rose', age: 21, address: 'sh'},
        {userId: 'id3', name: 'mike', age: 20, address: 'zj'}
    ]
});

userListView.data.users.push({userId: 'id4', name: '', ...});
userListView.data.users.pop();

// todo
// userListView.data.users.unshift({userId: 'id4', name: '', ...});

userListView.data.users.shift();
userListView.data.users.delete({userId: 'id3', name: '' ...});
userListView.data.users.filter(user => user.age > 18);
```

### Use props to transfor data

```javascript
class UserView extends View {
    construct(props) {
        super(props);
        // ...
        // coding here
    }

    template() {
        return this.html`
        <div class="${this.props.class}">
        $${'user.name'} - $${'user.address'}
        </div>
        `;
    }
}

const userView = new UserView({class: 'primary'});
userView.update({
    user: {
        name: 'rose',
        address: 'usa'
    }
})
```

## todo

[] Implement feature like 'computed' -> jason

- <https://mobx.js.org/refguide/computed-decorator.html#-computed>
- <https://vuejs.org/v2/guide/computed.html>

[x] Separate GapCommitTxn from norm Txn.

[] Replace 'gap-view' with 'custom-tag-name' -> sc

[] Prevent infinite loop of changing data caused by `watcher` -> zk

[x] GapArr.unshift(item)

[x] Alternate `console.log` for debug

[] Separate proxy/data from view -> jason

[] vdom / ast -> sc

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