import Component from 'rizzo-next/src/core/component.js'

public class | source

Component

The main class that will be extended when a new componenet is created. Extend this class with es6 syntax.

Example:

import { Component } from "./core/bane"

class ArticlesComponent extends Component {
  initialize() {
    this.events = {
      "click .foo": "fooClicked"
    }
  }
  render() {
    //...
  }
  fooClicked() {
    //...
  }
}

Test:

bane core

Constructor Summary

Public Constructor
public	constructor(options: [Options]) Constructs a component

Member Summary

Public Members
public	$el: *
public	channel: string
public	cid: *
public	el: *

Method Summary

Public Methods
public	build(data: Object): jQuery This method actually builds the template and inserts the HTML into the DOM
public	getInitialState(): Object Pull data off of a custom data attribute `data-lp-initial-abc`.
public	initialize()
public	publish(topic: String, data: Object): * Publish an event on the `components` channel
public	render(): Object Override this method with custom rendering logic

Public Constructors

public constructor(options: [Options]) source

Constructs a component

Params:

Name	Type	Attribute	Description
options	[Options]		An options object
options.el	Element		An element to attatch this component to
options.events	Object		A key value pair of events

Public Members

public $el: * source

public channel: string source

public cid: * source

public el: * source

Public Methods

public build(data: Object): jQuery source

This method actually builds the template and inserts the HTML into the DOM

Params:

Name	Type	Attribute	Description
data	Object		The data to pass to a template function

Return:

jQuery

Returns the element

public getInitialState(): Object source

Pull data off of a custom data attribute data-lp-initial-abc. This allows for server side JSON data to be embeded in the document.

Return:

Object

The parsed JSON data

Example:

HTML

<div data-lp-initial-cards="{{cards}}"></div>

JavaScript

let state = this.getInitialState(); 
state.cards; // { cards: ... }

public initialize() source

public publish(topic: String, data: Object): * source

Publish an event on the components channel

Params:

Name	Type	Attribute	Description
topic	String		Topic to publish
data	Object		Data to publish on the channel

Return:

public render(): Object source

Override this method with custom rendering logic

Return:

Object

Instance of the component