Question

我有一个数组，我需要填充多个'properties'，如下所示：

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

我想列出properties中的所有ul，我希望有一个+按钮，它会为数组添加一个新对象（最初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);

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

任何想法，任何人？

Answer 1

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

对于覆盖问题，可能添加key属性会有效吗？看起来很相关。查看http://mithril.js.org/mithril.html#dealing-with-focus了解详情。

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

1 个答案: