BackboneJS with ES classes and web components
npm install nextbone@babel/plugin-proposal-decorators and @babel/plugin-proposal-class-properties plugins
Javascript
import { Model, Collection } from 'nextbone'
class Task extends Model {
static defaults = {
title: '',
done: false
}
}
class Tasks extends Collection {
static model = Task
}
const tasks = new Tasks()
tasks.fetch()
`
Define a web component using LitElement
Without decorators
`Javascript
import { LitElement, html} from 'lit'
import { view, delegate } from 'nextbone'
class TasksView extends view(LitElement) {
static properties = {
// set type hint to Collection or Model to enable update on property mutation
tasks: { type: Collection }
}
constructor() {
super()
this.tasks = new Tasks()
delegate(this, 'click', '#fetch', this.fetchTasks)
}
fetchTasks() {
this.tasks.fetch()
}
render() {
return html
- ${task.get('title')}
}
}
customElements.define('tasks-view', TasksView)
document.body.innerHTML = ' '
`
With decorators
`Javascript
import { LitElement, html, property } from 'lit'
import { state, eventHandler } from 'nextbone'
@view
class TasksView extends LitElement {
// use specialized state decorator
@state
tasks = new Tasks()
// or use property decorator with type hint = Collection or Model
@property({ type: Collection })
tasks = new Tasks()
@eventHandler('click', '#fetch')
fetchTasks() {
this.tasks.fetch()
}
render() {
return html
- ${task.get('title')}
}
}
customElements.define('tasks-view', TasksView)
document.body.innerHTML = ' '
``