Mithril Sample Todo Code

by knrm720

HTML

<script src="//cdn.jsdelivr.net/mithril/0.2.0/mithril.min.js"></script>
<body>
    <div id="contents"></div>
</body>

JavaScript

/*
 * Modelを定義
 * ページ内の文言データを管理
 */
var PageModel = function() {

    this.data = m.prop({});

    this.fetch = function(){
        var that = this;
        
        //dummy json api
        m.request({
            method: "POST",
            url: "/echo/json/",
            data: {
                json:JSON.stringify({
                    title: "Mithrilサンプル01 - Todoアプリ",
                    description: "Mithrilのサンプルコード。Todoの登録と一覧の確認が可能。"
                }),
                delay: 0
            },
            serialize: function(data) {
                return m.route.buildQueryString(data)
            },
            config: function(xhr){
                xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            }
        })
        .then(function(resp){
            that.data(resp);
        });
        return this;
    };

    this.get = function(){
        return this.data;
    };
};

/*
 * Modelを定義
 * Todoのアイテムデータ管理
 */
var ItemModel = function() {

    this.data = m.prop({});

    this.get = function(){
        return this.data;
    };

    this.update = function(data){
        this.data(data);
        return this;
    };
};

/*
 * Modelを定義
 * Todoのリストデータを管理
 */
var ListModel = function() {

    this.data = [];

    this.get = function(){
        return this.data;
    };

    this.add = function(item){
        if(!item.text && item.text === ""){
            return false;
        }
        this.get().push(item);
    };
};

/*
 * controller定義
 */
var myCtrl = function() {
    var that = this;

    //pageModel
    var pageModel = new PageModel().fetch();
    this.pageData = pageModel.get();

    //listModel
    var listModel = new ListModel();
    this.listData = listModel.get();

    //itemModel
    var itemModel = new ItemModel();
    this.itemData = itemModel.get();

    //inputの"onchange"時に実行する関数
    this.onChangeInput = function(value){
       ...