将可编辑的动态对象添加到Mithriljs中的数组中

我有一个数组，需要用多个'properties'填充，类似于以下内容：

[
    {
        name: 'Date',
        value: '27 Oct'
    },
    {
        name: 'Type',
        value: 'Image'
    },
    {
        name: 'Client',
        value: 'Apple'
    }
]

我想列出ul中的所有properties，并且我想有一个+按钮，它将向数组添加一个新对象（最初name和value将为空）。双击每个项目（在本例中为li）后，我想使这些properties可编辑。

所以我做了这样的事情：

var Properties = {};
Properties.items = [
    {
        name: m.prop('Date'),
        value: m.prop('21 Dec'),
        editable: m.prop(false)
    }
];

这是我的初始数组。

然后，我有一个控制器：

Properties.controller = function() {
    this.addNewItem = function() {
        Properties.items.push({
            name: m.prop('Sample'),
            value: m.prop('Test'),
            editable: m.prop(false)
        })
    };
    this.toggleEditable = function(item) {
        item.editable(!item.editable());
        console.log(item.editable());
    };
};

我的观点：

Properties.view = function(ctrl) {
    return m('ul.list-unstyled', [
        Properties.items.map(function(item) {
            return m('li', [
                item.editable() ? m('input', {
                    value: item.name(),
                    onkeyup: function(e) {
                        if(e.keyCode == 13) {
                            ctrl.toggleEditable.bind(ctrl, item);
                        } else {
                            m.withAttr('value', item.name)
                        }
                    }
                }) :
                m('span', {
                    ondblclick: ctrl.toggleEditable.bind(ctrl, item)
                }, item.name()),
                m('span', ': '),
                m('span', item.value())
            ]);
        }),
        m('div',{
            onclick: ctrl.addNewItem.bind(ctrl)
        }, '+')
    ]);
};

最后：

m.mount(document.querySelector('.container'), Properties);

但当我开始打字时，它会覆盖我写的内容，不会保存新值。。

有什么想法吗？