panphora

<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>

panphora

[
  "about",
  "account",
  "action",
  "add",
  "admin",
  "agree",
  "alert",
  "api",
  "arguments",

panphora

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) {

panphora

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) {

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>
<div 

panphora

Remake.js Quick Reference

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

Switch.js

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.

panphora

# 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

panphora

// 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]';
}

panphora

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();
}

panphora

// DESCRIPTION:
// ============
// loops through all items in a nested object/array
//
// USE:
// ===
// forEachNestedData({currentItem, callback});
//
// OUTPUT:
// ======