wpietri/mobiledo.html

## mobiledo.html
<!DOCTYPE html>
<html>
<head>
    <title>MobileDo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <script src="enyo/enyo.js"></script>
    <script>enyo.depends(
            // include support libraries
            "$lib/layout",
            "$lib/onyx"//,
            // include application sources
//            "css",
//            "models",
//            "controllers",
//            "views",
//            "apps",
            // include our default entry point
//            "start.js"
    );
    </script>
    <style>
        .todo_name {
            border:0;
            width:84%;
        }

    </style>
    <script>
        enyo.kind({
            name: "ToDoList",
            kind: "Repeater",
            components: [{
                name: "item",
                oninput: "itemChanged",
                itemChanged: function(){console.log("itemChanged1")},
                components: [
                    {tag: "input", attributes: {type: "checkbox"}, name: "checked"},
                    {tag: "span", content: " "},
                    {kind: "enyo.Input", name: "name", classes: "todo_name"}
                ]
            }],
            itemChanged: function(){console.log("itemChanged2")},
            setToDos: function(todos) {
                this.todos = todos;
                this.setCount(todos.length);
            },
            setupItem: function(inSender, inEvent) {
                var index = inEvent.index;
                var item = inEvent.item;
                var todo = this.todos[index];
                item.$.checked.setAttribute("checked",todo.checked);
                item.$.name.setValue(todo.name);
                return true;
            },
            addNew: function() {
                this.todos.push({checked: false, name:""});
                this.setCount(this.todos.length);
            },
            handlers: {
                onSetupItem: "setupItem"
            }
        });
        enyo.kind({
            name: "MobileDo.MainView",
            kind: "FittableRows",
            itemChanged: function(){console.log("itemChanged3")},

            components: [{
                name: "toolbar",
                kind: "onyx.Toolbar",
                layoutKind: "FittableColumnsLayout",
                components: [
                    {content: "MobileDo", fit:true},
                    {kind: "onyx.Button", classes: "onyx-affirmative", content: "+", ontap: "newToDo"}
                ]
            }, {
                name: "todo_list",
                kind: "ToDoList",
                fit: true
            }, {
                kind: "onyx.Toolbar",
                components: []
            }],
            create: function() { this.inherited(arguments); this.$.todo_list.setToDos(this.initialToDos); },
            newToDo: function() { this.$.todo_list.addNew(); },

            initialToDos: [{checked:true, name: "Install MobileDo"}, {checked:false, name: "add some to-dos"}]
        });


        enyo.kind({
            name: "MobileDo.Application",
            kind: "enyo.Application",
            components: [],
            view: "MobileDo.MainView",
            handlers: {
            }
        });
        enyo.ready(function () {
            new MobileDo.Application({name: "app"});
        });


    </script>

</head>
<body>
<p>broken!</p>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>MobileDo</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf8"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<script src="enyo/enyo.js"></script>
	<script>enyo.depends(
	// include support libraries
	"$lib/layout",
	"$lib/onyx"//,
	// include application sources
	// "css",
	// "models",
	// "controllers",
	// "views",
	// "apps",
	// include our default entry point
	// "start.js"
	);
	</script>
	<style>
	.todo_name {
	border:0;
	width:84%;
	}

	</style>
	<script>
	enyo.kind({
	name: "ToDoList",
	kind: "Repeater",
	components: [{
	name: "item",
	oninput: "itemChanged",
	itemChanged: function(){console.log("itemChanged1")},
	components: [
	{tag: "input", attributes: {type: "checkbox"}, name: "checked"},
	{tag: "span", content: " "},
	{kind: "enyo.Input", name: "name", classes: "todo_name"}
	]
	}],
	itemChanged: function(){console.log("itemChanged2")},
	setToDos: function(todos) {
	this.todos = todos;
	this.setCount(todos.length);
	},
	setupItem: function(inSender, inEvent) {
	var index = inEvent.index;
	var item = inEvent.item;
	var todo = this.todos[index];
	item.$.checked.setAttribute("checked",todo.checked);
	item.$.name.setValue(todo.name);
	return true;
	},
	addNew: function() {
	this.todos.push({checked: false, name:""});
	this.setCount(this.todos.length);
	},
	handlers: {
	onSetupItem: "setupItem"
	}
	});
	enyo.kind({
	name: "MobileDo.MainView",
	kind: "FittableRows",
	itemChanged: function(){console.log("itemChanged3")},

	components: [{
	name: "toolbar",
	kind: "onyx.Toolbar",
	layoutKind: "FittableColumnsLayout",
	components: [
	{content: "MobileDo", fit:true},
	{kind: "onyx.Button", classes: "onyx-affirmative", content: "+", ontap: "newToDo"}
	]
	}, {
	name: "todo_list",
	kind: "ToDoList",
	fit: true
	}, {
	kind: "onyx.Toolbar",
	components: []
	}],
	create: function() { this.inherited(arguments); this.$.todo_list.setToDos(this.initialToDos); },
	newToDo: function() { this.$.todo_list.addNew(); },

	initialToDos: [{checked:true, name: "Install MobileDo"}, {checked:false, name: "add some to-dos"}]
	});


	enyo.kind({
	name: "MobileDo.Application",
	kind: "enyo.Application",
	components: [],
	view: "MobileDo.MainView",
	handlers: {
	}
	});
	enyo.ready(function () {
	new MobileDo.Application({name: "app"});
	});



	</script>

	</head>
	<body>
	<p>broken!</p>

	</body>
	</html>