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

我有一个数组，我需要用多个

'properties'

填充它，如下所示：

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

var Properties = {};

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

我想列出

ul

中的所有

属性

，我想有一个

+

按钮，它将向数组添加一个新对象（最初

名称

和

值

将为空）。双击每个项目（在本例中为

li

）后，我希望使这些

属性可编辑

所以我做了这样的事情：

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

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);

但当我开始输入时，它会覆盖我写的内容，而不会保存新值

任何人，有什么想法吗？
您应该保留原始数组作为数据模型，将其传递给
Properties
并让
Properties
仅存储可编辑状态。这是一个很好的数据分离，将简化代码。它还可以解决保存问题，因为它可以直接在
onkeyup
事件中设置数组值

对于覆盖问题，可能添加一个
键
属性就可以了？这似乎有关联。查看更多信息