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>
[ | |
"about", | |
"account", | |
"action", | |
"add", | |
"admin", | |
"agree", | |
"alert", | |
"api", | |
"arguments", |
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(); | |
} |
// DESCRIPTION: | |
// ============ | |
// loops through all items in a nested object/array | |
// | |
// USE: | |
// === | |
// forEachNestedData({currentItem, callback}); | |
// | |
// OUTPUT: | |
// ====== |
/* | |
# Description | |
A light jQuery replacement that takes a selector and returns an instance with helper methods. | |
# API | |
## event delegation |