LightSpeedC/counter-min.html

## counter-min.html
<!DOCTYPE html>
<meta charset="UTF-8">
<title>counter minimum - Mithril.js</title>

<script src="mithril.min.js"></script>
<!--[if IE]><script src="es5-shim.min.js"></script><![endif]-->

<body></body>

<script>

//カウンター
var counter = 0;

//タイマーでカウントアップ
setInterval(function () {
    counter++;
    m.redraw(true);
}, 1000);

//ビュー
function view() {
    return 'count: ' + counter;
}

//HTML要素にコンポーネントをマウント
m.mount(document.body, {view: view});

</script>

## counter-prop.html
<!DOCTYPE html>
<meta charset="UTF-8">
<title>counter prop - Mithril.js</title>

<script src="mithril.min.js"></script>
<!--[if IE]><script src="es5-shim.min.js"></script><![endif]-->

<body>
<div id="$counterElement"></div>
</body>

<script>

//コンポーネント定義
var counterComponent = {
    //コントローラ
    controller: function () {
        var ctrl = this;

        //カウンター
        ctrl.counter = m.prop(0);

        //タイマーでカウントアップ
        setInterval(function () {
            ctrl.counter(ctrl.counter() + 1);
            m.redraw(true);
        }, 1000);
    },
    //ビュー
    view: function (ctrl) {
        return m('div', 'count: ' + ctrl.counter());
    }
};

//HTML要素にコンポーネントをマウント
m.mount($counterElement, counterComponent);

</script>

## todo-app.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ToDo App - Mithril.js</title>

<script src="mithril.min.js"></script>
<!--[if IE]><script src="es5-shim.min.js"></script><![endif]-->
</head>

<body>
<div id="$todoElement"></div>
</body>

<script>

//コンポーネント定義
var todoComponent = function () {
    'use strict';

    // モデル: Todoクラスは2つのプロパティ(title : string, done : boolean)を持つ
    function Todo(data) {
        this.title = m.prop(data.title);
        this.done  = m.prop(false);
    };

    // モデル: TodoListクラスはTodoオブジェクトの配列
    var TodoList = Array;

    // コントローラ・オブジェクトctrlは
    // 表示されているTodoのリスト(list)を管理し、
    // 作成が完了する前のTodoのタイトル(title)を格納したり、
    // Todoを作成して追加(add)が可能かどうかを判定し、
    // Todoが追加された後にテキスト入力をクリアする

    // このアプリケーションは、todoComponentコンポーネントでコントローラとビューを定義する
    var todoComponent = {

        // コントローラは、モデルの中のどの部分が、現在のページと関連するのかを定義している
        // この場合は1つのコントローラ・オブジェクトctrlですべてを取り仕切っている
        controller: function (listArg) {
            var ctrl = this;

            // アクティブなToDoのリスト
            ctrl.list = new TodoList();

            // 引数に渡されたtodoタイトルリストからToDoのリストに追加
            if (listArg) {
                listArg.forEach(function (title) {
                    ctrl.list.push(new Todo({title: title}));
                });
            }

            // 新しいToDoを作成する前の、入力中のToDoの名前を保持するスロット
            ctrl.title = m.prop('');

            // ToDoをリストに登録し、ユーザが使いやすいようにtitleフィールドをクリアする
            ctrl.add = function () {
                var val = ctrl.title() ||
                    document.getElementById('$title').value; // for ie8
                if (val) {
                    ctrl.list.push(new Todo({title: val}));
                    ctrl.title('');
                }
                return false;
            };

        },

        // ビュー
        view: function (ctrl) {
            return [
                m('form', {onsubmit: ctrl.add},
                    m('input', m_on('change', 'value', ctrl.title, {id: '$title'})),
                    m('button[type=submit]', {onclick: ctrl.add}, 'Add')),
                m('table', [ctrl.list.map(function(todo) {
                    return m('tr', [
                        m('td', [
                            m('input[type=checkbox]', m_on('click', 'checked', todo.done))
                        ]),
                        m('td', {style: {textDecoration: todo.done() ? 'line-through' : 'none'}}, todo.title())
                    ]);
                })])
            ];
        }
    };

    // HTML要素のイベントと値にプロパティを接続するユーティリティ
    function m_on(eventName, propName, propFunc, attrs) {
        attrs = attrs || {};
        attrs['on' + eventName] = m.withAttr(propName, propFunc);
        attrs[propName] = propFunc();
        return attrs;
    }

    return todoComponent;

}();

// アプリケーションの初期化
// HTML要素にコンポーネントをマウント
m.mount($todoElement, m.component(todoComponent, ['first task', 'second task']));
// m.mount($todoElement, todoComponent);

</script>
</html>

## view関数の返り値の例
return 'count: ' + counter;                       // 文字列
return [m('div', 'count: '), m('div', counter)];  // m('div')を2つ持つ配列
return m('div', 'count: ' + counter);             // m()のコンテンツは文字列
return m('div', 'count: ', counter);              // m()のコンテンツは文字列と数字
return m('div', ['count: ', counter]);            // m()のコンテンツは配列
return m('div', [['count: '], [[[counter]]]]);    // m()のコンテンツは複雑な配列
	<!DOCTYPE html>
	<meta charset="UTF-8">
	<title>counter minimum - Mithril.js</title>

	<script src="mithril.min.js"></script>
	<!--[if IE]><script src="es5-shim.min.js"></script><![endif]-->

	<body></body>

	<script>

	//カウンター
	var counter = 0;

	//タイマーでカウントアップ
	setInterval(function () {
	counter++;
	m.redraw(true);
	}, 1000);

	//ビュー
	function view() {
	return 'count: ' + counter;
	}

	//HTML要素にコンポーネントをマウント
	m.mount(document.body, {view: view});

	</script>
	<!DOCTYPE html>
	<meta charset="UTF-8">
	<title>counter prop - Mithril.js</title>

	<script src="mithril.min.js"></script>
	<!--[if IE]><script src="es5-shim.min.js"></script><![endif]-->

	<body>
	<div id="$counterElement"></div>
	</body>

	<script>

	//コンポーネント定義
	var counterComponent = {
	//コントローラ
	controller: function () {
	var ctrl = this;

	//カウンター
	ctrl.counter = m.prop(0);

	//タイマーでカウントアップ
	setInterval(function () {
	ctrl.counter(ctrl.counter() + 1);
	m.redraw(true);
	}, 1000);
	},
	//ビュー
	view: function (ctrl) {
	return m('div', 'count: ' + ctrl.counter());
	}
	};

	//HTML要素にコンポーネントをマウント
	m.mount($counterElement, counterComponent);

	</script>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>ToDo App - Mithril.js</title>

	<script src="mithril.min.js"></script>
	<!--[if IE]><script src="es5-shim.min.js"></script><![endif]-->
	</head>

	<body>
	<div id="$todoElement"></div>
	</body>

	<script>

	//コンポーネント定義
	var todoComponent = function () {
	'use strict';

	// モデル: Todoクラスは2つのプロパティ(title : string, done : boolean)を持つ
	function Todo(data) {
	this.title = m.prop(data.title);
	this.done = m.prop(false);
	};

	// モデル: TodoListクラスはTodoオブジェクトの配列
	var TodoList = Array;

	// コントローラ・オブジェクトctrlは
	// 表示されているTodoのリスト(list)を管理し、
	// 作成が完了する前のTodoのタイトル(title)を格納したり、
	// Todoを作成して追加(add)が可能かどうかを判定し、
	// Todoが追加された後にテキスト入力をクリアする

	// このアプリケーションは、todoComponentコンポーネントでコントローラとビューを定義する
	var todoComponent = {

	// コントローラは、モデルの中のどの部分が、現在のページと関連するのかを定義している
	// この場合は1つのコントローラ・オブジェクトctrlですべてを取り仕切っている
	controller: function (listArg) {
	var ctrl = this;

	// アクティブなToDoのリスト
	ctrl.list = new TodoList();

	// 引数に渡されたtodoタイトルリストからToDoのリストに追加
	if (listArg) {
	listArg.forEach(function (title) {
	ctrl.list.push(new Todo({title: title}));
	});
	}

	// 新しいToDoを作成する前の、入力中のToDoの名前を保持するスロット
	ctrl.title = m.prop('');

	// ToDoをリストに登録し、ユーザが使いやすいようにtitleフィールドをクリアする
	ctrl.add = function () {
	var val = ctrl.title() \|\|
	document.getElementById('$title').value; // for ie8
	if (val) {
	ctrl.list.push(new Todo({title: val}));
	ctrl.title('');
	}
	return false;
	};

	},

	// ビュー
	view: function (ctrl) {
	return [
	m('form', {onsubmit: ctrl.add},
	m('input', m_on('change', 'value', ctrl.title, {id: '$title'})),
	m('button[type=submit]', {onclick: ctrl.add}, 'Add')),
	m('table', [ctrl.list.map(function(todo) {
	return m('tr', [
	m('td', [
	m('input[type=checkbox]', m_on('click', 'checked', todo.done))
	]),
	m('td', {style: {textDecoration: todo.done() ? 'line-through' : 'none'}}, todo.title())
	]);
	})])
	];
	}
	};

	// HTML要素のイベントと値にプロパティを接続するユーティリティ
	function m_on(eventName, propName, propFunc, attrs) {
	attrs = attrs \|\| {};
	attrs['on' + eventName] = m.withAttr(propName, propFunc);
	attrs[propName] = propFunc();
	return attrs;
	}

	return todoComponent;

	}();

	// アプリケーションの初期化
	// HTML要素にコンポーネントをマウント
	m.mount($todoElement, m.component(todoComponent, ['first task', 'second task']));
	// m.mount($todoElement, todoComponent);

	</script>
	</html>
	return 'count: ' + counter; // 文字列
	return [m('div', 'count: '), m('div', counter)]; // m('div')を2つ持つ配列
	return m('div', 'count: ' + counter); // m()のコンテンツは文字列
	return m('div', 'count: ', counter); // m()のコンテンツは文字列と数字
	return m('div', ['count: ', counter]); // m()のコンテンツは配列
	return m('div', [['count: '], [[[counter]]]]); // m()のコンテンツは複雑な配列