David Miranda panphora

An Annotated Remake Todos Web App

This is an example of how to build a simple todos web app with Remake, using only data attributes.

Parent template:

<h1>Todo list</h1>

A framework that uses a set of powerful data attributes to help you build web apps quickly!

Allows you to treat the DOM like a state machine, meaning you can toggle the state of one or more elements, turning a specified flag on or off.


	import java.util.stream.IntStream;

	class Main {
	public static void main(String[] args) {
	System.out.println(IntStream.range(1,5).map(n -> n*2).reduce(1, (a,b)->a+b));
	}
	}

	<ul data-o-type="list">
	{{#forEachItem data.todos itemName="todo"}}
	<li data-o-type="object" data-l-key-text data-i-editable>{{todo.text}}</li>
	{{/forEachItem}}
	</ul>
	<button data-i-new="todo">Add Todo</button>

	var elem = document.querySelector("body");

	function deepForEachElem (elem, callback) {
	callback(elem);
	Array.from(elem.children \|\| []).forEach(function (el) {
	deepForEachElem(el, callback);
	});
	}

	deepForEachElem(elem, function (el) {

	let isObject = (a) => typeof a === "object" && a !== null && !Array.isArray(a);
	let isArray = (a) => Array.isArray(a);
	let forEachKeyValuePair = (obj, cb) => {
	Object.keys(obj).forEach(function (k) {
	cb(k, obj[k]);
	});
	};
	let fillMissingKeys = (target, source) => {
	forEachKeyValuePair(source, (key, value) => {
	if (target[key] === undefined) {

	# REMAKE.JS web app framework

	# overview

	- handles rendering your templates with data
	- handles creating routes for your templates
	- handles letting people modify the data on the page
	- handles serializing the data on the page so it can saved
	- handles merging the saved data into the user data
	- handles activating and deactivating page elements

	// starting with: object, childObject

	// goal
	// - given an object/array and a child object/array, give me the path to the child

	// some code copied from: https://github.com/moxystudio/js-deep-for-each

	function isPlainObject (obj) {
	return Object.prototype.toString.call(obj) === '[object Object]';
	}

	export default function slugify (str) {
	return str
	.trim()
	.replace(/[^0-9A-Za-z\-\s]/g, " ") // keep alphanumeric, dashes, and spaces
	.replace(/ +/g, " ") // replace double spaces with single space
	.replace(/ /g, "-") // replace single spaces with single dash
	.replace(/\-\-/g, "-") // replace double dashes with single dash
	.toLowerCase();
	}