js-data

Class: Component

Component

new Component(opts)

The base class from which all JSData components inherit some basic functionality.

Typically you won't instantiate this class directly, but you may find it useful as an abstract class for your own components.

See Component.extend for an example of using Component as a base class.

import {Component} from 'js-data'
Method parameters:
Name Type Argument Description
opts Object <optional>

Configuration options.

Properties
Name Type Argument Default Description
debug Boolean <optional>
 false

See Component#debug.
Return value:
Type Description
Component

A new Component instance.
Details
Since Source
3.0.0 Component.js, line 4

Members

_listeners

Event listeners attached to this Component. Do not modify. Use Component#on and Component#off instead.

Details
Type Since Source
Object 3.0.0 Component.js, line 52

debug

Whether to enable debug-level logs for this component. Anything that extends Component inherits this option and the corresponding logging functionality.

Details
Type Since Default value Source
Boolean 3.0.0 
false
 Component.js, line 28
Example 

// Normally you would do: import {Component} from 'js-data'
const JSData = require('js-data@3.0.0-beta.7')
const {Component} = JSData
console.log('Using JSData v' + JSData.version.full)

const component = new Component()
component.log('debug', 'some message') // nothing gets logged
// Display debug logs:
component.debug = true
component.log('debug', 'other message') // this DOES get logged

Methods

<static> extend(props, classProps)

Create a subclass of this Component:

Method parameters:
Name Type Argument Default Description
props Object <optional>
 {}

Properties to add to the prototype of the subclass.

Properties
Name Type Argument Description
constructor Object <optional>

Provide a custom constructor function to be used as the subclass itself.
classProps Object <optional>
 {}

Static properties to add to the subclass.
Return value:
Type Description
Constructor

Subclass of this Component class.
Details
Since Source
3.0.0 Component.js, line 68
Example 

// Normally you would do: import {Component} from 'js-data'
const JSData = require('js-data@3.0.0-beta.7')
const {Component} = JSData
console.log('Using JSData v' + JSData.version.full)

// Extend the class using ES2015 class syntax.
class CustomComponentClass extends Component {
  foo () { return 'bar' }
  static beep () { return 'boop' }
}
const customComponent = new CustomComponentClass()
console.log(customComponent.foo())
console.log(CustomComponentClass.beep())

// Extend the class using alternate method.
const OtherComponentClass = Component.extend({
  foo () { return 'bar' }
}, {
  beep () { return 'boop' }
})
const otherComponent = new OtherComponentClass()
console.log(otherComponent.foo())
console.log(OtherComponentClass.beep())

// Extend the class, providing a custom constructor.
function AnotherComponentClass () {
  Component.call(this)
  this.created_at = new Date().getTime()
}
Component.extend({
  constructor: AnotherComponentClass,
  foo () { return 'bar' }
}, {
  beep () { return 'boop' }
})
const anotherComponent = new AnotherComponentClass()
console.log(anotherComponent.created_at)
console.log(anotherComponent.foo())
console.log(AnotherComponentClass.beep())

dbg(args)

Log the provided values at the "debug" level. Debug-level logs are only logged if Component#debug is true.

.dbg(...) is shorthand for .log('debug', ...).

Method parameters:
Name Type Argument Description
args * <optional>
<repeatable>

Values to log.
Details
Since Source
3.0.0 Component.js, line 123

emit(event, args)

Trigger an event on this Component.

Method parameters:
Name Type Argument Description
event String

Name of event to emit.
args * <optional>
<repeatable>

Arguments to pass to any listeners.
Details
Since Source
3.0.0 Component.js, line 201
Example 

// import {Collection, DataStore} from 'js-data'
const JSData = require('js-data@3.0.0-beta.7')
const {Collection, DataStore} = JSData

const collection = new Collection()
collection.on('foo', (msg) => {
  console.log(msg)
})
collection.emit('foo', 'bar')

const store = new DataStore()
store.on('beep', (msg) => {
  console.log(msg)
})
store.emit('beep', 'boop')

log(level, args)

Log the provided values. By default sends values to console[level]. Debug-level logs are only logged if Component#debug is true.

Will attempt to use appropriate console methods if they are available.

Method parameters:
Name Type Argument Description
level String

Log level.
args * <optional>
<repeatable>

Values to log.
Details
Since Source
3.0.0 Component.js, line 133

off(event, listener)

Remove an event listener from this Component. If no listener is provided, then all listeners for the specified event will be removed. If no event is specified then all listeners for all events will be removed.

Method parameters:
Name Type Argument Description
event String <optional>

Name of event to unsubsribe to.
listener Function <optional>

Listener to remove.
Details
Since Source
3.0.0 Component.js, line 179
Examples 
// Remove a particular listener for a particular event
collection.off('add', handler)
// Remove all listeners for a particular event
record.off('change')
// Remove all listeners to all events
store.off()

on(event, listener, ctx)

Register a new event listener on this Component.

Method parameters:
Name Type Argument Description
event String

Name of event to subsribe to.
listener Function

Listener function to handle the event.
ctx * <optional>

Optional content in which to invoke the listener.
Details
Since Source
3.0.0 Component.js, line 146
Examples 
// Listen for all "afterCreate" events in a DataStore
store.on('afterCreate', (mapperName, props, opts, result) => {
  console.log(mapperName) // "post"
  console.log(props.id) // undefined
  console.log(result.id) // 1234
})
store.create('post', { title: 'Modeling your data' }).then((post) => {
  console.log(post.id) // 1234
})
// Listen for the "add" event on a collection
collection.on('add', (records) => {
  console.log(records) // [...]
})
// Listen for "change" events on a record
post.on('change', (record, changes) => {
  console.log(changes) // { changed: { title: 'Modeling your data' } }
})
post.title = 'Modeling your data'