avilaj/index.html

## index.html
<!DOCTYPE html>

<style type="text/css">
</style>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
  <script src="https://rawgit.com/intercellular/cell/plan/cell.js"></script>
  <script async src="zapp.js"></script>
</body>
</html>

## zapp.js
const Book = (book, editor) => ({
  $text: book.name,
   $init() {
     console.log("book", this);
   },
  _edit() {
    actions.edit(book);
  },
  onclick() {
    this._edit();
  }
});

const Input = (attrs) => {
  var def = {
    $init() {
      console.dir(this);
    },
    $type: "input",
    type: "text"
  };
  return Object.assign({}, def, attrs);
};


const actions = {
  save(book) {
    state.books.push(book);
    state.editing = {};
    console.log("save", book);
  },
  edit(book) {
    state.editing = book;
    Editor._open(book);
  }
}
const state = {
  editing: {},
  books: [
    { name: "Caperucita roja"},
    { name: "Los tres chanchitos"}
  ]
};

let Editor = {
  $type: "form",
  $init() {
    console.dir(this);
    Editor = this;
  },
  _open(book) {
    this._book = book;
  },
  onsubmit(e) {
    e.preventDefault();
    actions.save(state.editing);
  },
  $components: [
    Input({
      name: "título",
      placeholder: "Titulo del libro",
      value: state.editing.name,
      onchange(e) {
        console.log(state);
      }
    })
  ]
};
const el = {
  $cell: true,
  $type: "div",
  $init(){ console.log('master', this)},
  $components: [
    Editor,
    ...state.books.map(book => Book(book, Editor))
  ],
}
console.log(el)
document.body.$cell(el);
	<!DOCTYPE html>

	<style type="text/css">
	</style>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<body>
	<script src="https://rawgit.com/intercellular/cell/plan/cell.js"></script>
	<script async src="zapp.js"></script>
	</body>
	</html>
	const Book = (book, editor) => ({
	$text: book.name,
	$init() {
	console.log("book", this);
	},
	_edit() {
	actions.edit(book);
	},
	onclick() {
	this._edit();
	}
	});

	const Input = (attrs) => {
	var def = {
	$init() {
	console.dir(this);
	},
	$type: "input",
	type: "text"
	};
	return Object.assign({}, def, attrs);
	};


	const actions = {
	save(book) {
	state.books.push(book);
	state.editing = {};
	console.log("save", book);
	},
	edit(book) {
	state.editing = book;
	Editor._open(book);
	}
	}
	const state = {
	editing: {},
	books: [
	{ name: "Caperucita roja"},
	{ name: "Los tres chanchitos"}
	]
	};

	let Editor = {
	$type: "form",
	$init() {
	console.dir(this);
	Editor = this;
	},
	_open(book) {
	this._book = book;
	},
	onsubmit(e) {
	e.preventDefault();
	actions.save(state.editing);
	},
	$components: [
	Input({
	name: "título",
	placeholder: "Titulo del libro",
	value: state.editing.name,
	onchange(e) {
	console.log(state);
	}
	})
	]
	};
	const el = {
	$cell: true,
	$type: "div",
	$init(){ console.log('master', this)},
	$components: [
	Editor,
	...state.books.map(book => Book(book, Editor))
	],
	}
	console.log(el)
	document.body.$cell(el);