Mithril Problem

mithril.js

var PostList = {
		controller: function(args) {
			this.edit = function(post) {
				if(post.editing() === true) {
					post.editing(false);
				} else {
					post.previousTitle = post.title();
					post.editing(true);
				}
			},

			this.doneEditing = function(post) {
				post.editing(false);
				m.redraw();
			},

			this.deletePost = function(post, e) {
				e.preventDefault();
				if(window.confirm('Do you really wish to delete this?')) {
					Post.destroy(post.id());
				} else {
					post.title(post.previousTitle);
					post.editing(false);
				}
			}
		},

    view: function(ctrl, args) {
        return m('ul#project-list', [
            args.posts().map(function(post) {
                return m('li', {
                	class: (function() {
                		var classes = 'project project-' + post.category();
                		classes += post.editing() ? ' editing' : '';
                		return classes;
                	})()
                }, [
                	m('h3', post.title(),
    							m('span.amount', post.progress())
    						),

    						m('a[href="#"].edit', {
    							onclick: ctrl.edit.bind(ctrl, post)
    						}, [
    							m('svg.icon.icon-edit[viewBox="0 0 100 100"]', [
    								m('use[href=<?php echo get_stylesheet_directory_uri(); ?>/svg/spritemap.svg#ellipsis-h]')
    							])
    						]),
    						m('table.edit-block', [
    								m('tr.option', [
    									m('td.action', [
    										m('a[href="javascript;"]', {
    											onclick: Modal.editForm.bind(ctrl, post)
    										}, 'Edit This Project')
    									])
    								]),
    								m('tr.option', [
    									m('td.action.last', [
    										m('a[href="javascript;"]', {
    											onclick: ctrl.deletePost.bind(ctrl, post)
    										}, 'Delete This Project')
    									])
    								])
    							]),

    						m('input[type=range]', {
    							value: post.progress(),
    							config: function(el, init) {
    								rangeSlider.create(el, {
    									polyfill: true,
    									onSlide: function(position, value) {
    										post.progress(position);
    										m.redraw();
    									},
    									onSlideEnd: function(position, value) {
    										args.onsave({title: post.title(), progress: position}, post.id())
    									}
    								})
    							}
    						})
                ])
            })
        ])
    }
}

var index = {
	controller: function update() {
		this.categories = Category.list(data);
		this.posts = Post.list(data)
		this.save = function(post, id) {
			Post.save(post, id).then(update.bind(this))
		}.bind(this)
	},

	view: function(ctrl) {
		return [
		m.component(Modal, {key: '', onsave: ctrl.save, categories: ctrl.categories}),
			m("button[type=button].add-button", {onclick: Modal.isVisible.bind(this, true)}, [
				m('svg.icon.icon-add[viewBox="0 0 100 100"]', [
					m('use[href=<?php echo get_stylesheet_directory_uri(); ?>/svg/spritemap.svg#plus-circle]')
				])
			]),
			m('div.key', [
				m.component(CategoryList, {categories: ctrl.categories})
			]),
			m.component(PostList, {posts: ctrl.posts, onsave: ctrl.save})
		]
	}
}

var Modal = {
	isVisible: m.prop(false),
	
	editForm: function(post, e) {
		e.preventDefault();
		post.editing(false);
		Modal.isVisible(true);
		m.component(Modal, {post: post});
	},

	isAdd: m.prop(true),

	controller: function(args) {
		this.post = m.prop(args.post || new Post());

		this.doneEditing = function(post, e) {
			e.preventDefault();
			Modal.isVisible(false);
			args.onsave(post);
		}
	},

	view: function(ctrl, args) {
		var post = ctrl.post();
		return m('#modal.modal-wrapper', [
			m('.modal', {
				class: [
					Modal.isVisible() ? 'modal-visible' : ''
				]
			}, [
				m('div.md-content', [
					m('.modal-dialog', [
						m('a.modal-close[href=javascript:;]', {
							onclick: function() {
								Modal.isVisible(false);
								m.redraw();
							}
						}, 'x')
					]),
					m('p', post.title()),
					m('form', [
						m('label.label', {for: 'title'}, 'Project Title'),
						m('input[type=text].title', {
							required: 'required',
							name: 'title',
							value: post.title(),
							oninput: m.withAttr('value', post.title)
						}),
						m('div.categories', [
							m('p.label', 'Select a Category'),
							args.categories().map(function(category) {
								return [
									m('label.control-md.radio', [
										m('input[type=radio]', {
											name: 'radio',
											value: category.name(),
											onfocus: function(e) {
												ctrl.selectedRadio = e.target;
												post.category(e.target.value)
											},
										}),
										m('span.label', category.name())
									])
								]
							})
						]),
						m('label.label', {for: 'new-category'}, '...or add a'),
						m('input[type=text].title', {
							placeholder: 'New Category',
							oninput: m.withAttr('value', post.category),
							onfocus: function() {
								if(ctrl.selectedRadio) {
									ctrl.selectedRadio.checked = false;
								}
							},
						}),
						m('div.submit-block', [
							m('input[type=submit].submit', {
								value: Modal.isAdd() ? 'Add A New Project' : 'Save Changes',
								onclick: ctrl.doneEditing.bind(ctrl, post)
							})
						])

					])
				])
			]),
			m('.md-overlay'),
		])
	}
}