Skip to content

Use Matt-Esch/virtual-dom with TehShrike/abstract-state-router!

Notifications You must be signed in to change notification settings

ArtskydJ/virtualdom-state-renderer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 

Repository files navigation

virtualdom-state-renderer

Use virtual-dom with abstract-state-router!

example

index.js

var StateRouter = require('abstract-state-router')
var virtualdomRenderer = require('virtualdom-state-renderer')
var domready = require('domready')

var stateRouter = StateRouter(virtualdomRenderer, 'body')

// add whatever states to the state router
stateRouter.addState({
	name: 'app',
	route: '/',
	template: require('./template.js')
})

domready(function() {
	stateRouter.evaluateCurrentRoute('app')
})

template.js

module.exports = function template(h, resolveContent, helpers) {
	return (
		h('div', [
			h('p', 'Pretty sweet, isn\'t it?'),
			h('p', 'Here, let me give some examples or something.')
		])
	)
}

api

var virtualdomRenderer = require('virtualdom-state-renderer')

virtualdomRenderer

Pass this object into the StateRouter.

var Router = require('abstract-state-router')
var renderer = require('virtualdom-state-renderer')

Router(renderer, 'body')

templates

A template is a function that returns a virtual-dom object. If you wanted, you could use the virtual-html library to generate a virtual-dom object.

The function is supplied with these arguments:

template.js

var virtualHtml = require('virtual-html')

module.exports = function template(h, resolveContent, helpers) {
	var html = (
		'<div>' +
			'<p>Pretty sweet, isn\'t it?</p>' +
			'<p>Here, let me give some examples or something.</p>' +
			'<a href="' + helpers.makePath('app') + '">' +
				'Click to go to the "app" state.' +
			'</a>' +
		'</div>'
	)
	return virtualHtml(html)
}

domApi

This object is exposed by the state router in the activate() function. The object has the following properties:

  • el is the DOM element that is created/updated.
  • emitter is the event emitter on helpers. This allows the template to request an update, or something.
  • sharedState is the object that comes from the resolve content, which is the set in the resolve callback. See the resolve() function docs.
  • update() is a function that will render the template, and update the DOM if necessary.

license

VOL

About

Use Matt-Esch/virtual-dom with TehShrike/abstract-state-router!

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published