Skip to content

Instantly share code, notes, and snippets.

@Raynos Raynos/usage.js Secret
Last active Dec 11, 2015

Embed
What would you like to do?
var fold = require("reducers/fold")
var Stream = require("stream-reduce/stream")
var Person = require("./person-widget")
// Pass in state as either object
var p = Person({
name: "some name"
, imageUri: "http://placekitten.com/50/50"
})
// or as some kind of reducible representation of person over time
var p = Person(reducibleState)
document.body.appendChild(p.view)
// handle changes coming from UI
fold(p.ignores, function (event) {
// do stuff with events
})
// or fuck reducible and handle as stream
var stream = Stream(p.replies)
stream.on("data", function (event) {
})
var events = require("dom-reduce/event")
var map = require("reducers/map")
var merge = require("reducers/merge")
var html = require("unpack-html")
var extend = require("xtend")
var template = '\
<li class="person">\
<img class="person-image" data-marker="image"></img>\
<div class="person-details">\
<span data-marker="name"></span>\
<button data-marker="message"> Message </button>\
<button data-marker="ignore"> Ignore </button>\
</div>\
</li>'
module.exports = Person
/*
A widget takes stateful representation of input that
needs to be rendered.
It returns (DOM-agnostic) state changes produced by DOM and
a DOMElement as view / element property.
*/
function Person(person) {
var elements = unpack(template)
// bind data to DOM. Every time person changes update the
// entire view.
fold(person, function (person) {
elements.name.textContent = person.name
elements.image.src = person.imageUri
})
// convert message clicks into reply events with correct
// state context
var replies = map(events(elements.message, "click"), function () {
return {
type: "reply"
, id: person.id
, name: person.name
}
})
// convert ignore clicks into ignore events with correct
// state context
var ignores = map(events(elements.ignore, "click"), function () {
return {
type: "ignore"
, id: person.id
, name: person.name
}
})
// return Reducible containing state events for this widget
// and return view
return {
replies: replies
, ignores: ignores
, view: elements.root
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.